Package Exports

@plq/use-persisted-state
@plq/use-persisted-state/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@plq/use-persisted-state) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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. The library is fully compatible with React 18 and React 19.

React 19 Compatibility

This library is fully compatible with React 19 and supports all new features:

Works seamlessly with useTransition for performance optimization
Compatible with useActionState for form handling
Supports useOptimistic for optimistic updates

Check out our React 19 examples to see these features in action!

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.

@plq/use-persisted-state