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

1$ pnpm add zustand-sync-tabs

or

1$ npm install zustand-sync-tabs

or

1$ yarn add zustand-sync-tabs

Usage

Add the middleware while creating the store and the rest will be taken care.

1import { create } from "zustand";
2import { syncTabs } from "zustand-sync-tabs";
3
4type MyStore = {
5	count: number;
6	set: (n: number) => void;
7};
8
9const useStore = create<MyStore>(
10	syncTabs(
11		set => ({
12			count: 0,
13			set: n => set({ count: n }),
14		}),
15		{ name: "my-channel" },
16	),
17);

⚡🎉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.

1type SyncTabsOptionsType = {
2	name: string;
3	/** @deprecated */
4	regExpToIgnore?: RegExp;
5	include?: (string | RegExp)[];
6	exclude?: (string | RegExp)[];
7};

Example

1export const useMyStore = create<MyStoreType>()(
2	syncTabs(
3		set => ({
4			count: 0,
5			_count: 0 /** skipped as it is included in exclude array */,
6			setCount: count => {
7				set(state => ({ ...state, count }));
8			},
9			set_Count: _count => {
10				set(state => ({ ...state, _count }));
11			},
12		}),
13		{ name: "example", exclude: ["_count"] },
14	),
15);

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.

---

with 💖 by Mayank Kumar Chaudhari