usePersistedState

Persists the state to localStorage, sessionStorage or any custom storage

Features

Persist the state to localStorage, sessionStorage or 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.json file

chrome.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.

Akurganow/use-persisted-state