https://github.com/react18-tools/zustand-sync-tabs
Zustand middleware to easily sync Zustand state between tabs / windows / iframes (Same Origin)
https://github.com/react18-tools/zustand-sync-tabs
Last synced: 6 months ago
JSON representation
Zustand middleware to easily sync Zustand state between tabs / windows / iframes (Same Origin)
- Host: GitHub
- URL: https://github.com/react18-tools/zustand-sync-tabs
- Owner: react18-tools
- License: mit
- Created: 2023-08-27T09:21:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T07:10:34.000Z (about 1 year ago)
- Last Synced: 2025-08-09T16:57:22.868Z (6 months ago)
- Language: TypeScript
- Size: 51.8 KB
- Stars: 32
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Zustand Sync Tabs [](https://www.npmjs.com/package/zustand-sync-tabs) [](https://www.npmjs.com/package/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
```bash
$ pnpm add zustand-sync-tabs
```
**or**
```bash
$ npm install zustand-sync-tabs
```
**or**
```bash
$ yarn add zustand-sync-tabs
```
## Usage
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`!
## 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.
```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](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)
### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/turborepo-template)!
Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
## License
Licensed as MIT open source.
with 💖 by Mayank Kumar Chaudhari