zustand-sync

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.

with 💖 by Mayank Kumar Chaudhari