https://github.com/alimertcakar/zustand-sync

Simple middleware to sync zustand store between multiple tabs
https://github.com/alimertcakar/zustand-sync

zustand zustand-middleware zustand-persist zustand-state-management zustandmiddleware

Last synced: 8 days ago
JSON representation

Simple middleware to sync zustand store between multiple tabs

• Host: GitHub
• URL: https://github.com/alimertcakar/zustand-sync
• Owner: alimertcakar
• Created: 2025-01-17T17:36:57.000Z (20 days ago)
• Default Branch: main
• Last Pushed: 2025-01-20T10:52:59.000Z (17 days ago)
• Last Synced: 2025-01-30T03:48:58.121Z (8 days ago)
• Topics: zustand, zustand-middleware, zustand-persist, zustand-state-management, zustandmiddleware
• Language: TypeScript
• Homepage: https://zustand-sync.netlify.app/
• Size: 27.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Zustand Sync Middleware

This middleware for Zustand allows you to synchronize store data between different browser tabs. When the state changes in one tab, the updated state will be reflected in all other open tabs. You can use this with zustand/persist with no issues.

Syncing is only supported with localStorage (duh).

Demo: https://zustand-sync.netlify.app/  

Codesandbox: https://codesandbox.io/p/sandbox/zustand-sync-zk5dvg

## Installation

To install the middleware, you can use pnpm, npm or yarn:

```sh

pnpm add zustand-sync-middleware

# or

npm install zustand-sync-middleware

# or

yarn add zustand-sync-middleware

```

## Usage

To use the middleware, import it and apply it to your Zustand store:

```typescript

import create from "zustand";

import sync from "zustand-sync-middleware";

const useStore = create(

  sync((set) => ({

    // ...your slices

  }))

);

```

## Usage with zustand/persist

You have to put `sync` middleware before `persist` middleware. Share the key you used to persist your store at. (This is used to watch `localStorage[persistanceKey]`)

Additionally, you can add `enabled: false` to skip the middleware.

```typescript

const storageUnit = localStorage;

const persistanceKey = "persisted-store";

const persistOptions = {

  name: persistanceKey,

  storage: createJSONStorage(() => storageUnit),

  partialize: (state) => ({

    count: state.count,

    name: state.name,

  }),

};

const syncOptions = {

  name: persistanceKey,

  enabled: storageUnit === localStorage,

};

const useStore = create(

  persist(

    sync(

      (set) => ({

        // ...your slices

      }),

      syncOptions

    ),

    persistOptions

  )

);

```

Warning: Don't call `sync(persist(...)) instead of persist(sync())` if you want to sync only the data you filtered in `partialize` in `persistOptions`.

## Thank you! ❤️

⭐ If you liked the library, can you star this repo? ⭐

https://github.com/alimertcakar/zustand-sync

Also, the source code is super simple and pr's are welcome!

## License

This project is licensed under the MIT License. Meaning: do whatever you want with it as long as you don't sue me.