You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Zustand middleware to easily sync Zustand state between tabs / windows / iframes (Same Origin)
3
+
> Zustand middleware to easily sync Zustand state between tabs/windows / iframes (Same Origin)
4
4
5
-
- ✅ 🐙 (465 Bytes gZiped) < 0.5 kB size cross-tab state sharing middleware for zustand
5
+
- ✅ 🐙 ~ 1 kB size cross-tab state sharing middleware for Zustand
6
6
- ✅ Full TypeScript Support
7
-
- ✅ solid reliability in 1 writing and n reading tab-scenarios (with changing writing tab)
8
-
- ✅ Fire and forget approach of always using the latest state. Perfect for singleuser systems
7
+
- ✅ solid reliability in 1 writing and n reading tabscenarios (with changing writing tab)
8
+
- ✅ Fire and forget approach of always using the latest state. Perfect for single-user systems
9
9
- ✅ Sync Zustand state between multiple browsing contexts
10
-
- ✅ Partial state sharing also supported
10
+
- ✅ Partial state sharing is also supported
11
11
12
-
> Checkout `[persistnsync](https://github.com/mayank1513/nextjs-themes/tree/main/packages/persistnsync#readme)` if you are looking for persisting state locally over reload/refresh or after closing site
12
+
> 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.
13
13
14
14
## Install
15
15
16
16
```bash
17
17
$ pnpm add zustand-sync-tabs
18
-
# or
18
+
```
19
+
**or**
20
+
21
+
```bash
19
22
$ npm install zustand-sync-tabs
20
-
# or
23
+
```
24
+
**or**
25
+
26
+
```bash
21
27
$ yarn add zustand-sync-tabs
22
28
```
23
29
24
30
## Usage
25
31
26
-
Simply add the middleware while creating the store and the rest will be taken care.
32
+
Add the middleware while creating the store and the rest will be taken care.
## Advanced - ignore / filter out fields based on regExp
51
57
52
-
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 regExp. Just pass `regExpToIgnore` (optional - default -> undefined) in options object.
58
+
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.
53
59
54
60
```ts
55
-
// to ignore fields containing a slug
56
-
persistNSync(
57
-
set=> ({
58
-
count: 0,
59
-
slugSomeState: 1,
60
-
slugSomeState2: 1,
61
-
set: n=>set({ count: n }),
62
-
}),
63
-
{ name: "my-channel", regExpToIgnore:/slug/ },
64
-
// or regExpToIgnore: new RegExp('slug')
65
-
// Use full power of regExp by adding `i` and `g` flags
66
-
),
61
+
typeSyncTabsOptionsType= {
62
+
name:string;
63
+
/**@deprecated*/
64
+
regExpToIgnore?:RegExp;
65
+
include?: (string|RegExp)[];
66
+
exclude?: (string|RegExp)[];
67
+
};
67
68
```
68
69
69
-
For more details about regExp check out - [JS RegExp](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)
70
-
71
-
### Exact match
72
-
73
-
For exactly matching a parameter/field use `/^your-field-name$/`. `^` forces match from the first caracter and similarly, `$` forces match until last character.
70
+
**Example**
74
71
75
-
### Ignore multiple fields with exact match
76
-
77
-
use `regExpToIgnore: /^(field1|field2|field3)$/`
78
-
79
-
## Roadmap
72
+
```typescript
73
+
exportconst useMyStore =create<MyStoreType>()(
74
+
syncTabs(
75
+
set=> ({
76
+
count: 0,
77
+
_count: 0/** skipped as it is included in exclude array */,
78
+
setCount: count=> {
79
+
set(state=> ({ ...state, count }));
80
+
},
81
+
set_Count: _count=> {
82
+
set(state=> ({ ...state, _count }));
83
+
},
84
+
}),
85
+
{ name: "example", exclude: ["_count"] },
86
+
),
87
+
);
88
+
```
80
89
81
-
-[ ]`regExpToInclude` -> once implemented, passing this parameter will sync only matching fields
90
+
For more details about regExp check out - [JS RegExp](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)
82
91
83
-
### 🤩 Don't forger to start[this repo](https://github.com/mayank1513/turborepo-template)!
92
+
### 🤩 Don't forget to star[this repo](https://github.com/mayank1513/turborepo-template)!
84
93
85
-
Want handson 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)
94
+
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)
0 commit comments