From 888c551fa0a8d819129b8b79c34363555e9377b0 Mon Sep 17 00:00:00 2001 From: joel Date: Wed, 7 Sep 2022 02:15:14 +0900 Subject: [PATCH 1/3] Update persisting-store-data.md --- docs/integrations/persisting-store-data.md | 40 ++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index 7b86704bd7..a190619c76 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -519,6 +519,46 @@ export const useBoundStore = create( ) ``` +### How can I connect state to URL hash. + +If you want to connect store to URL hash, you can create your own hash storage. + +```ts +import create from 'zustand' +import { persist, StateStorage } from 'zustand/middleware' + +const hashStorage: StateStorage = { + getItem: (key): string => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + const storedValue = searchParams.get(key) + return JSON.parse(storedValue) + }, + setItem: (key, newValue): void => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + searchParams.set(key, JSON.stringify(newValue)) + location.hash = searchParams.toString() + }, + removeItem: (key): void => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + searchParams.delete(key) + location.hash = searchParams.toString() + }, +}; + +export const useBoundStore = create( + persist( + (set, get) => ({ + fishes: 0, + addAFish: () => set({ fishes: get().fishes + 1 }), + }), + { + name: 'food-storage', // unique name + getStorage: () => hashStorage, + }, + ), +) +``` + ### How can I rehydrate on storage event? You can use the `persist` api to create your own implementation, similar to what we see below From 961452c15352b46d6b8bc02cb9de86182ee0964a Mon Sep 17 00:00:00 2001 From: joel Date: Wed, 7 Sep 2022 02:20:35 +0900 Subject: [PATCH 2/3] Fix persisting-store-data.md with 'yarn run prettier' --- docs/integrations/persisting-store-data.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index a190619c76..eede732b38 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -543,7 +543,7 @@ const hashStorage: StateStorage = { searchParams.delete(key) location.hash = searchParams.toString() }, -}; +} export const useBoundStore = create( persist( @@ -554,8 +554,8 @@ export const useBoundStore = create( { name: 'food-storage', // unique name getStorage: () => hashStorage, - }, - ), + } + ) ) ``` From 8273c5a4a076436e364a23c40ef001127ef57b48 Mon Sep 17 00:00:00 2001 From: joel Date: Wed, 7 Sep 2022 21:11:52 +0900 Subject: [PATCH 3/3] Add connect-to-state-with-url-hash.md * Remove docs from persisting-store-data.md --- docs/guides/connect-to-state-with-url-hash.md | 48 +++++++++++++++++++ docs/integrations/persisting-store-data.md | 40 ---------------- 2 files changed, 48 insertions(+), 40 deletions(-) create mode 100644 docs/guides/connect-to-state-with-url-hash.md diff --git a/docs/guides/connect-to-state-with-url-hash.md b/docs/guides/connect-to-state-with-url-hash.md new file mode 100644 index 0000000000..48efac67e7 --- /dev/null +++ b/docs/guides/connect-to-state-with-url-hash.md @@ -0,0 +1,48 @@ +--- +title: Connect to state with URL hash +nav: 15 +--- + +## State is connected with URL hash + +If you want to connect state of a store to URL hash, you can create your own hash storage. + +```ts +import create from 'zustand' +import { persist, StateStorage } from 'zustand/middleware' + +const hashStorage: StateStorage = { + getItem: (key): string => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + const storedValue = searchParams.get(key) + return JSON.parse(storedValue) + }, + setItem: (key, newValue): void => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + searchParams.set(key, JSON.stringify(newValue)) + location.hash = searchParams.toString() + }, + removeItem: (key): void => { + const searchParams = new URLSearchParams(location.hash.slice(1)) + searchParams.delete(key) + location.hash = searchParams.toString() + }, +} + +export const useBoundStore = create( + persist( + (set, get) => ({ + fishes: 0, + addAFish: () => set({ fishes: get().fishes + 1 }), + }), + { + name: 'food-storage', // unique name + getStorage: () => hashStorage, + } + ) +) +``` + +## CodeSandbox Demo + +https://codesandbox.io/s/silly-fire-gsjbc7?file=/src/App.tsx diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index eede732b38..7b86704bd7 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -519,46 +519,6 @@ export const useBoundStore = create( ) ``` -### How can I connect state to URL hash. - -If you want to connect store to URL hash, you can create your own hash storage. - -```ts -import create from 'zustand' -import { persist, StateStorage } from 'zustand/middleware' - -const hashStorage: StateStorage = { - getItem: (key): string => { - const searchParams = new URLSearchParams(location.hash.slice(1)) - const storedValue = searchParams.get(key) - return JSON.parse(storedValue) - }, - setItem: (key, newValue): void => { - const searchParams = new URLSearchParams(location.hash.slice(1)) - searchParams.set(key, JSON.stringify(newValue)) - location.hash = searchParams.toString() - }, - removeItem: (key): void => { - const searchParams = new URLSearchParams(location.hash.slice(1)) - searchParams.delete(key) - location.hash = searchParams.toString() - }, -} - -export const useBoundStore = create( - persist( - (set, get) => ({ - fishes: 0, - addAFish: () => set({ fishes: get().fishes + 1 }), - }), - { - name: 'food-storage', // unique name - getStorage: () => hashStorage, - } - ) -) -``` - ### How can I rehydrate on storage event? You can use the `persist` api to create your own implementation, similar to what we see below