Akurganow
usePersistedState
Persists the state to localStorage, sessionStorage or any custom storage
Features
- Persist the state to
localStorage,sessionStorageor almost anything else implements storage API - The state factory takes as many keys as needed, so you don't have to call the factory for each variable
- Written with the TypeScript, the definitions go with the library
- No third-party dependencies
Example
import createPersistedState from '@plq/use-persisted-state'
import storage from '@plq/use-persisted-state/lib/storages/local-storage'
const [usePersistedState] = createPersistedState('example', storage)
export default function App() {
const [count, setCount] = usePersistedState('count', 0)
const handleIncrement = () => setCount(prevCount => prevCount + 1)
return (
<div>
{count}
<button onClick={handleIncrement}>+</button>
</div>
)
}
Requirement
To use @plq/use-persisted-state, you must use `react@16.8.0` or greater which includes Hooks.
Clear Storage
import createPersistedState from '@plq/use-persisted-state'
import storage from '@plq/use-persisted-state/lib/storages/local-storage'
const [usePersistedState, clear] = createPersistedState('example', storage)
export default function App() {
const [count, setCount] = usePersistedState('count', 0)
const increment = () => setCount(prevCount => prevCount + 1)
return (
<div>
{count}
<button onClick={increment}>+</button>
<button onClick={clear}>Clear</button>
</div>
)
}Use sessionStorage
import createPersistedState from '@plq/use-persisted-state'
import storage from '@plq/use-persisted-state/lib/storages/session-storage'
const [usePersistedState, clear] = createPersistedState('example', storage)Use async storage
import createPersistedState from '@plq/use-persisted-state'
// or
import { createAsyncPersistedState } from '@plq/use-persisted-state'
import { local } from '@plq/use-persisted-state/lib/storages/browser-storage'
const [usePersistedState, clear] = createPersistedState('example', local)Use custom storage
The storage API is similar to the browser.storage but with a few differences
import createPersistedState from '@plq/use-persisted-state'
const storageListeners = new Set()
onChangeSomeStorage(event => {
const changes = {
[event.key]: {
newValue: event.newValue,
oldValue: event.oldValue,
},
}
listeners.forEach(listener => {
listener(changes)
})
})
const myStorage = {
get: keys => getItemsFromSomeStorage(keys),
set: items => setItemsToSomeStorage(items),
remove: keys => removeItemsFromSomeStorage(keys),
onChanged: {
addListener: listener => storageListeners.add(listener),
removeListener: listener => storageListeners.delete(listener),
hasListener: listener => storageListeners.has(listener),
}
}
const [usePersistedState, clear] = createPersistedState('example', myStorage)Storage adapters
localStorage @plq/use-persisted-state/lib/storages/local-storage
- Useful for average web application
sessionStorage
@plq/use-persisted-state/lib/storages/session-storage - Useful for average web application
browser.storage
@plq/use-persisted-state/lib/storages/browser-storage - Only for web extensions.
- Don't forget to set up polyfill if you want to run extension in Chrome browser.
- To use this storage you need to include the "storage" permission in your
manifest.jsonfilechrome.storage
@plq/use-persisted-state/lib/storages/chrome-storage - Only for Chrome-based web extensions.
- If you develop extension that will be run only in Chrome browser you can use this storage without polyfill.
- You must declare the "storage" permission in the extension manifest to use this storage.