sync-zustand
v0.2.1
Published
Zustand middleware to easily sync Zustand state between tabs and windows
Downloads
12
Maintainers
Readme
Zustand Sync Tabs
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](https://github.com/react18-tools/persist-and-sync)
if you are looking for persisting state locally over reload/refresh or after closing the site.
Install
$ pnpm add zustand-sync-tabs
or
$ npm install zustand-sync-tabs
or
$ yarn add zustand-sync-tabs
Usage
Add the middleware while creating the store and the rest will be taken care.
import { create } from "zustand";
import { syncTabs } from "zustand-sync-tabs";
type MyStore = {
count: number;
set: (n: number) => void;
};
const useStore = create<MyStore>(
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
!
Advanced - ignore / filter out fields based on regExp
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.
type SyncTabsOptionsType = {
name: string;
/** @deprecated */
regExpToIgnore?: RegExp;
include?: (string | RegExp)[];
exclude?: (string | RegExp)[];
};
Example
export const useMyStore = create<MyStoreType>()(
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
🤩 Don't forget to star this repo!
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
License
Licensed as MIT open source.