Getting started

Supported Tauri Version

This plugin requires Tauri 2.0 or later.

Install

Install the Rust crate by adding the following to your Cargo.toml file:

src-tauri/Cargo.toml

[dependencies]
tauri-plugin-zustand = "0.1"

Install the JavaScript package with your preferred package manager:

npm

npm install @tauri-store/zustand

pnpm

pnpm add @tauri-store/zustand

deno

deno add npm:@tauri-store/zustand

bun

bun add @tauri-store/zustand

yarn

yarn add @tauri-store/zustand

Usage

1. Enable the required permissions in your capabilities file:

src-tauri/capabilities/zustand.json

{
  "identifier": "zustand",
  "windows": ["*"],
  "permissions": ["zustand:default", "core:event:default"]
}

2. Register the plugin with Tauri:

src-tauri/src/lib.rs

tauri::Builder::default()
  .plugin(tauri_plugin_zustand::init())
  .run(tauri::generate_context!())
  .expect("error while running tauri application");

3. Create a store:

src/stores/counter.ts

import { create } from 'zustand';
import { createTauriStore } from '@tauri-store/zustand';

type CounterStore = {
  counter: number;
  increment: () => void;
};

// A Zustand store, like any other.
export const useCounterStore = create<CounterStore>((set) => ({
  counter: 0,
  increment: () => set((state) => ({ counter: state.counter + 1 })),
}));

// A handle to the Tauri plugin.
// We will need this to start the store.
export const tauriHandler = createTauriStore('counter', useCounterStore);

4. Start it:

await tauriHandler.start();

TIP

Stores won't be saved nor synchronized until you call the start method.

5. Use the store in your React components:

import { useCounterStore } from '@/stores/counter';

export default function MyComponent() {
  const counter = useCounterStore((state) => state.counter);
  const increment = useCounterStore((state) => state.increment);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button type="button" onClick={increment}>
        <span>Increment</span>
      </button>
    </div>
  );
}