mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
fix(docs): Issue 1254 guides (#1267)
* Update persisting-store-data.md * Fix persisting-store-data.md with 'yarn run prettier' * Add connect-to-state-with-url-hash.md * Remove docs from persisting-store-data.md
This commit is contained in:
parent
1c56b91b5a
commit
faaed15364
48
docs/guides/connect-to-state-with-url-hash.md
Normal file
48
docs/guides/connect-to-state-with-url-hash.md
Normal file
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user