Zustand middleware to easily sync Zustand state between tabs and windows
npm install sync-tabs-zustand> Zustand middleware to easily sync Zustand state between tabs/windows / iframes (Same Origin)
- ✅ 🐙 ~ 1 kB size cross-tab state sharing middleware for Zustand
- ✅ Full TypeScript Support
- ✅ solid reliability in 1 writing and n reading tab scenarios (with changing writing tab)
- ✅ Fire and forget approach of always using the latest state. Perfect for single-user systems
- ✅ Sync Zustand state between multiple browsing contexts
- ✅ Partial state sharing is also supported
> Check out persist-and-sync if you are looking for persisting state locally over reload/refresh or after closing the site.
``bash`
$ pnpm add zustand-sync-tabs
or
`bash`
$ npm install zustand-sync-tabs
or
`bash`
$ yarn add zustand-sync-tabs
Add the middleware while creating the store and the rest will be taken care.
`ts
import { create } from "zustand";
import { syncTabs } from "zustand-sync-tabs";
type MyStore = {
count: number;
set: (n: number) => void;
};
const useStore = create
syncTabs(
set => ({
count: 0,
set: n => set({ count: n }),
}),
{ name: "my-channel" },
),
);
`
⚡🎉Boom! Just a couple of lines and your state perfectly syncs between tabs/windows and it is also persisted using localStorage!
In several cases you might want to exclude several fields from syncing. To support this scenario, we provide a mechanism to exclude fields based on list of fields or regular expression.
`ts`
type SyncTabsOptionsType = {
name: string;
/* @deprecated /
regExpToIgnore?: RegExp;
include?: (string | RegExp)[];
exclude?: (string | RegExp)[];
};
Example
`typescript``
export const useMyStore = create
syncTabs(
set => ({
count: 0,
_count: 0 /* skipped as it is included in exclude array /,
setCount: count => {
set(state => ({ ...state, count }));
},
set_Count: _count => {
set(state => ({ ...state, _count }));
},
}),
{ name: "example", exclude: ["_count"] },
),
);
For more details about regExp check out - JS RegExp
Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt
!Alt
Licensed as MIT open source.
with 💖 by Mayank Kumar Chaudhari