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 [email protected] 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.