{"_id":"@bebokland/zustand-url-storage","name":"@bebokland/zustand-url-storage","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bebokland/zustand-url-storage","version":"1.0.0","type":"module","description":"The custom storage adapter for Zustand's persist middleware that stores state directly in the browser URL (query string or hash).","exports":{".":"./dist/index.js"},"keywords":["zustand","url storage","custom storage","persist middleware"],"author":{"name":"Artur Siaznik"},"license":"ISC","devDependencies":{"@biomejs/biome":"2.4.13","typescript":"^6.0.3","vitest":"^4.1.5"},"peerDependencies":{"zustand":"^5.0.12"},"scripts":{"build":"tsc","check":"biome check --write ./src","clean":"rm -rf dist","test":"vitest run"},"_id":"@bebokland/zustand-url-storage@1.0.0","_integrity":"sha512-tplbe6zJq5ODY36qlfBPKjlB8RvfuZKd52+Mrbs2GMc7Zxv2ytl98OY1rpWUWmyTwRlqYZY6neJ1ID6SQxs8VA==","_resolved":"/private/var/folders/gz/hxfdyfzd33q3cswcm_m1kgsw0000gn/T/bf899d5c8d6517630d1e486f5e781e47/bebokland-zustand-url-storage-1.0.0.tgz","_from":"file:bebokland-zustand-url-storage-1.0.0.tgz","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-tplbe6zJq5ODY36qlfBPKjlB8RvfuZKd52+Mrbs2GMc7Zxv2ytl98OY1rpWUWmyTwRlqYZY6neJ1ID6SQxs8VA==","shasum":"d895728852dda5bdb2a9932196c973cdb3697374","tarball":"https://registry.npmjs.org/@bebokland/zustand-url-storage/-/zustand-url-storage-1.0.0.tgz","fileCount":9,"unpackedSize":8150,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFTu8wgJcGQQhKfLIbXlUqsjAgjrIghDT8b6qFfz8kRwAiEArVPz8pKlOgiBF/7sKGLh0gP7GIc6bxobOT6e2lxSrp8="}]},"_npmUser":{"name":"asiaznik","email":"artur.siaznik@gmail.com"},"directories":{},"maintainers":[{"name":"asiaznik","email":"artur.siaznik@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/zustand-url-storage_1.0.0_1779178162509_0.2226656349532652"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-19T08:09:22.360Z","1.0.0":"2026-05-19T08:09:22.725Z","modified":"2026-05-19T08:09:22.988Z"},"maintainers":[{"name":"asiaznik","email":"artur.siaznik@gmail.com"}],"description":"The custom storage adapter for Zustand's persist middleware that stores state directly in the browser URL (query string or hash).","keywords":["zustand","url storage","custom storage","persist middleware"],"author":{"name":"Artur Siaznik"},"license":"ISC","readme":"<p align=\"center\">\n  <img src=\"docs/public/zustand-url-storage.svg\" />\n</p>\n\n# @bebokland/zustand-url-storage\n\n`@bebokland/zustand-url-storage` is a custom storage adapter for Zustand's persist middleware that stores state directly in the browser URL (query string or hash).\nIt implements the `StateStorage` interface, allowing Zustand stores to seamlessly read from and write to URL parameters instead of traditional storage like `localStorage`.\n\n\n## What it does\n\n- Persists Zustand state in the browser URL (query string or hash)\n- Hydrates state from the URL on load\n- Keeps store state and URL in sync automatically\n- Supports both `pushState` and `replaceState` history updates\n- Provides optional handling for Zustand’s `{ state, version }` wrapper\n- Enables rehydration on browser navigation (`popstate`)\n\n\n## Key features\n\n- Works as a drop-in storage for Zustand persist\n- No external storage required (no localStorage, no backend)\n- Makes state:\n  - shareable via URL\n  - bookmarkable\n  - easy to debug\n\n## Installation\n\n<details>\n    <summary>npm</summary>\n\n```bash\nnpm install @bebokland/zustand-url-storage\n```\n</details>\n\n<details>\n    <summary>pnpm</summary>\n\n```bash\npnpm add @bebokland/zustand-url-storage\n```\n</details>\n\n<details>\n    <summary>yarn</summary>\n\n```bash\nyarn add @bebokland/zustand-url-storage\n```\n</details>\n\n## Example\n\n```typescript\nimport {\n    type UrlStorageOptions,\n    UrlStorageProperty,\n    urlStorage,\n    mergePersistedState,\n} from \"@bebokland/zustand-url-storage\";\n\nimport { create } from \"zustand\";\nimport { createJSONStorage, persist } from \"zustand/middleware\";\n\n// ...\n\ntype BebokStoreState = {\n    amount: number;\n    special?: number;\n    colors: string[];\n};\n\ntype BebokStoreActions = {\n    setAmount: (amount: number) => void;\n    setSpecial: (idx?: number) => void;\n    setColors: (colors: string[]) => void;\n};\n\nconst INITIAL_STATE: BebokStoreState = {\n    amount: 50,\n    special: undefined,\n    colors: [],\n};\n\nconst useBebokStore = create<BebokStoreState & BebokStoreActions>()(\n    persist(\n        (set) => ({\n            ...INITIAL_STATE,\n            setAmount: (amount) => set({ amount }),\n            setSpecial: (idx) => set({ special: idx }),\n            setColors: (colors) => set({ colors: uniq(colors) }),\n        }),\n        {\n            name: \"bebok-store\",\n            storage: createJSONStorage(() =>\n                urlStorage({\n                    urlProperty: UrlStorageProperty.QueryString,\n                    omitVersion: true,\n                    replace: false,\n                }),\n            ),\n            merge: mergePersistedState<BebokStoreState & BebokStoreActions>(INITIAL_STATE) // optional shallow merge with fallback to initial\n        },\n    ),\n);\n\nuseEffect(() => urlStorage.rehydrateOnPopState([useBebokStore]), []);\n```","readmeFilename":"README.md","_rev":"1-a661fb7fd793836624eac3b68bf1d281"}