{"_id":"zustand-sync-tabs","_rev":"7-95af514d85fe6c7fb17d29d699ec2e69","name":"zustand-sync-tabs","dist-tags":{"latest":"0.2.3"},"versions":{"0.0.0":{"name":"zustand-sync-tabs","version":"0.0.0","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.0.0","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/mayank1513/nextjs-themes/tree/main/packages/zustand-sync#readme","bugs":{"url":"https://github.com/mayank1513/nextjs-themes/issues"},"dist":{"shasum":"f50dd5c4164e45ccf8b984a41a1678eee64dc951","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.0.0.tgz","fileCount":4,"integrity":"sha512-+fcnMX0X9WiZJNBqrs+6cuOK0eNQMZ/LmfZcJMdV6dcoW4z4NZPLXl3NcJ8a6ROwxuJIvaGNdrFUFkUJIY1PZQ==","signatures":[{"sig":"MEQCIBuAHbalL9p0S3YZdkaDnuA0WyTS6Hn+igGVH1XjCH6zAiARe4f08GbrbuiMhzek3qtQIQat1YtlgF565CjyElEGkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4841},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"0322a2ea3fd26de426fe7f21ae0b483fd061c492","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/mayank1513/nextjs-themes.git#main","type":"git"},"_npmVersion":"9.6.7","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","_hasShrinkwrap":false,"peerDependencies":{"zustand":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.0.0_1693047136683_0.7989099914782831","host":"s3://npm-registry-packages"}},"0.0.1":{"name":"zustand-sync-tabs","version":"0.0.1","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.0.1","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/mayank1513/zustand-sync-tabs#readme","bugs":{"url":"https://github.com/mayank1513/zustand-sync-tabs/issues"},"dist":{"shasum":"e443b0d297885103cf5124709a5169007c1c5e4c","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.0.1.tgz","fileCount":4,"integrity":"sha512-zTP6/aBFgyvFUXMlR0RiMMz2o9SMhSHF3P2rOsmdyMd+P/MJ3SnqSOvc8sS7ykuy2xNmzEBCmOrUF16Evo94sg==","signatures":[{"sig":"MEYCIQCT369BFLKgQ/0jt+lHKXxegtpDWbdmxRvlyoBpkRLJ4AIhAMozNRfaawa+B+MoqprGo1BML9W/i1JPGlKACVtcIJeB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5933},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"c228c52a6405e900fc7c7597a0814574fd16bde5","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/mayank1513/zustand-sync-tabs.git","type":"git"},"_npmVersion":"9.5.0","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.14.2","_hasShrinkwrap":false,"peerDependencies":{"zustand":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.0.1_1693129356154_0.053087451563341714","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"zustand-sync-tabs","version":"0.1.0","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.1.0","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/mayank1513/zustand-sync-tabs#readme","bugs":{"url":"https://github.com/mayank1513/zustand-sync-tabs/issues"},"dist":{"shasum":"734727b0d522467bfdd1dfa9e024d8a16e8c6de1","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.1.0.tgz","fileCount":4,"integrity":"sha512-T2aOsQopZ2EyFvB8/7dD4PT96mAYjVMvtum1a/FEUo0vHXqtcKXl8PX+YJqj4F+lI4OcwyXmCiPtKR6rEu6lUQ==","signatures":[{"sig":"MEUCIQDE4bkI7t87d43Rx6JicN3JpELmaXbTrquNKE636JE2hgIgYrwpVoWWT0X3B7RjgFw8Jsmp66xVCUYwY0v3h5aofU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6633},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"70ab3ffcf9003f6a340256f362d9ec0f6b36282a","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/mayank1513/zustand-sync-tabs.git","type":"git"},"_npmVersion":"9.8.1","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.18.0","_hasShrinkwrap":false,"peerDependencies":{"zustand":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.1.0_1696698653733_0.5201476583171118","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"zustand-sync-tabs","version":"0.2.0","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.2.0","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/react18-tools/zustand-sync-tabs#readme","bugs":{"url":"https://github.com/react18-tools/zustand-sync-tabs/issues"},"dist":{"shasum":"687de42730758cd568ce30e01fe5e0e0a54858b3","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.2.0.tgz","fileCount":4,"integrity":"sha512-V5pRw7fj+C8HSDjE3RmNcnhWA3iJE10sIS3WWFKYZB+ENX9E/hG3qUWA7YZaNbzipEJkcRBXA+HTU3r82QAT/w==","signatures":[{"sig":"MEUCIEM3hJrt/QMs3HBIhOivpFQr+7A6a68LVNYHvBMg/rtpAiEAsoLAf49gZI8FeKdXN7HWm/1WRVb/KP1mdo9O4ur0B+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8702},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"b3a233802ef4089640d455cb45bf86b4864361d3","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/react18-tools/zustand-sync-tabs.git","type":"git"},"_npmVersion":"10.2.3","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","_hasShrinkwrap":false,"peerDependencies":{"zustand":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.2.0_1703843011076_0.46527499165576236","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"zustand-sync-tabs","version":"0.2.1","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.2.1","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/react18-tools/zustand-sync-tabs#readme","bugs":{"url":"https://github.com/react18-tools/zustand-sync-tabs/issues"},"dist":{"shasum":"b06254fbd004014be8312815ff9cb5ceff9fc32b","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.2.1.tgz","fileCount":4,"integrity":"sha512-xIePooC8yU4sAVT6GTbtgkWaTu+xo0TxeufoP7HMLW8pNhN3AmN9AvvAR4IvCftdQF93hBdmjcoShQ7ZTJHKog==","signatures":[{"sig":"MEQCIAYIRFS19VYJBAri9o5+J9ytPvxtCwrpq4HCG9dbCjmqAiBFqQndoaLeZ2i/G2ujThtO5Ch4Ncw1at0CtW22BJfvFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/zustand-sync-tabs@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":8702},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"e9fe2fee8a8316742e8571a9dee7e50bd08d91fe","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/react18-tools/zustand-sync-tabs.git","type":"git"},"_npmVersion":"10.2.3","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","_hasShrinkwrap":false,"peerDependencies":{"zustand":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.2.1_1704165328000_0.44807635950389746","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"zustand-sync-tabs","version":"0.2.2","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","_id":"zustand-sync-tabs@0.2.2","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"homepage":"https://github.com/react18-tools/zustand-sync-tabs#readme","bugs":{"url":"https://github.com/react18-tools/zustand-sync-tabs/issues"},"dist":{"shasum":"d7eba49cf69a751f3f7d1451148f2598a923c102","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.2.2.tgz","fileCount":4,"integrity":"sha512-i2pQPm5SGBIq50v7tt6XFXZSR/iJNErOslS5HzMKJVd06+xDyBCXioxEap0Ke6u98+a49fU5QRqzypo21wMe9A==","signatures":[{"sig":"MEUCICJUTtmKKLGHM++ufTYKiyX+6CLlOsEDA8Q+NgMzmYvhAiEA3OzpdUT3aNx82Qh2e7v+ekUrMUX7CJqjYbixjqSAOvk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/zustand-sync-tabs@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":8697},"main":"index.js","types":"index.d.ts","funding":{"url":"https://github.com/sponsors/mayank1513","type":"github"},"gitHead":"97040a21dd89cb45ed0c9e0f23c568fb44a88e22","_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"repository":{"url":"git+https://github.com/react18-tools/zustand-sync-tabs.git","type":"git"},"_npmVersion":"10.8.2","description":"Zustand middleware to easily sync Zustand state between tabs and windows","directories":{},"sideEffects":false,"_nodeVersion":"18.20.5","_hasShrinkwrap":false,"peerDependencies":{"zustand":"3-5"},"_npmOperationalInternal":{"tmp":"tmp/zustand-sync-tabs_0.2.2_1737702664074_0.6760552580141634","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"zustand-sync-tabs","author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"version":"0.2.3","description":"Zustand middleware to easily sync Zustand state between tabs and windows","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/react18-tools/zustand-sync-tabs.git"},"bugs":{"url":"https://github.com/react18-tools/zustand-sync-tabs/issues"},"homepage":"https://github.com/react18-tools/zustand-sync-tabs#readme","sideEffects":false,"license":"MIT","funding":{"type":"github","url":"https://github.com/sponsors/mayank1513"},"peerDependencies":{"zustand":">=3.0.0 <6.0.0"},"keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"_id":"zustand-sync-tabs@0.2.3","gitHead":"2b55a11eb8eb868b058efa322fa661e58c3982de","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-NtA4g0v6bh34jYzbGVgjsfR6rPjlUc9Oj6QAeKWikxV3UIYEhPo9AEbAk/3X0p6H1o/waBKqZ/nLfRuz7OH4rA==","shasum":"293d0c070b995c2f3f042d592111f49a66d4b4b3","tarball":"https://registry.npmjs.org/zustand-sync-tabs/-/zustand-sync-tabs-0.2.3.tgz","fileCount":4,"unpackedSize":8708,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/zustand-sync-tabs@0.2.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFi7vFlwzkDzOaAcjXwKxOQDRxyaoJT9wOFXHmQ9DbHjAiEA6TzvKmoFRM7nGNCjvvQtb9KO3lQM5qIrPk3R07IaDZY="}]},"_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"directories":{},"maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/zustand-sync-tabs_0.2.3_1755011415757_0.43967012993111876"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-26T10:52:16.682Z","modified":"2025-08-12T15:10:16.728Z","0.0.0":"2023-08-26T10:52:16.908Z","0.0.1":"2023-08-27T09:42:36.330Z","0.1.0":"2023-10-07T17:10:53.973Z","0.2.0":"2023-12-29T09:43:31.223Z","0.2.1":"2024-01-02T03:15:28.182Z","0.2.2":"2025-01-24T07:11:04.241Z","0.2.3":"2025-08-12T15:10:15.958Z"},"bugs":{"url":"https://github.com/react18-tools/zustand-sync-tabs/issues"},"author":{"name":"Mayank Kumar Chaudhari","email":"https://mayank-chaudhari.vercel.app"},"license":"MIT","homepage":"https://github.com/react18-tools/zustand-sync-tabs#readme","keywords":["web","api","broadcast","channel","sync-tabs","sync-windows","sync","broadcast-channel","hooks","react","react 18","zustand","middleware","state","optimized","tiny","typescript","javascript","zustand","mayank1513"],"repository":{"type":"git","url":"git+https://github.com/react18-tools/zustand-sync-tabs.git"},"description":"Zustand middleware to easily sync Zustand state between tabs and windows","maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"readme":"# Zustand Sync Tabs [![Version](https://img.shields.io/npm/v/zustand-sync-tabs.svg?colorB=green)](https://www.npmjs.com/package/zustand-sync-tabs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/zustand-sync-tabs.svg)](https://www.npmjs.com/package/zustand-sync-tabs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/zustand-sync-tabs)\n\n> Zustand middleware to easily sync Zustand state between tabs/windows / iframes (Same Origin)\n\n- ✅ 🐙 ~ 1 kB size cross-tab state sharing middleware for Zustand\n- ✅ Full TypeScript Support\n- ✅ solid reliability in 1 writing and n reading tab scenarios (with changing writing tab)\n- ✅ Fire and forget approach of always using the latest state. Perfect for single-user systems\n- ✅ Sync Zustand state between multiple browsing contexts\n- ✅ Partial state sharing is also supported\n\n> 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.\n\n## Install\n\n```bash\n$ pnpm add zustand-sync-tabs\n```\n**or**\n\n```bash\n$ npm install zustand-sync-tabs\n```\n**or**\n\n```bash\n$ yarn add zustand-sync-tabs\n```\n\n## Usage\n\nAdd the middleware while creating the store and the rest will be taken care.\n\n```ts\nimport { create } from \"zustand\";\nimport { syncTabs } from \"zustand-sync-tabs\";\n\ntype MyStore = {\n\tcount: number;\n\tset: (n: number) => void;\n};\n\nconst useStore = create(\n\tsyncTabs(\n\t\tset => ({\n\t\t\tcount: 0,\n\t\t\tset: n => set({ count: n }),\n\t\t}),\n\t\t{ name: \"my-channel\" },\n\t),\n);\n```\n\n⚡🎉Boom! Just a couple of lines and your state perfectly syncs between tabs/windows and it is also persisted using `localStorage`!\n\n## Advanced - ignore / filter out fields based on regExp\n\nIn 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.\n\n```ts\ntype SyncTabsOptionsType = {\n\tname: string;\n\t/** @deprecated */\n\tregExpToIgnore?: RegExp;\n\tinclude?: (string | RegExp)[];\n\texclude?: (string | RegExp)[];\n};\n```\n\n**Example**\n\n```typescript\nexport const useMyStore = create()(\n\tsyncTabs(\n\t\tset => ({\n\t\t\tcount: 0,\n\t\t\t_count: 0 /** skipped as it is included in exclude array */,\n\t\t\tsetCount: count => {\n\t\t\t\tset(state => ({ ...state, count }));\n\t\t\t},\n\t\t\tset_Count: _count => {\n\t\t\t\tset(state => ({ ...state, _count }));\n\t\t\t},\n\t\t}),\n\t\t{ name: \"example\", exclude: [\"_count\"] },\n\t),\n);\n```\n\nFor more details about regExp check out - [JS RegExp](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)\n\n### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/turborepo-template)!\n\nWant 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)\n\n![Alt](https://repobeats.axiom.co/api/embed/6b5fa6a5fbb6affafea042ba0f292ecf9388ef3c.svg \"Repobeats analytics image\")\n\n## License\n\nLicensed as MIT open source.\n\n
\n\n

with 💖 by Mayank Kumar Chaudhari

\n","readmeFilename":"README.md"}