Nocturnally Psychologizing Millipede

    @plq/use-persisted-state
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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 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>
      )
    }

    Edit @plq/use-persisted-state

    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.

    Install

    npm i @plq/use-persisted-state

    DownloadsWeekly Downloads

    431

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    69.1 kB

    Total Files

    93

    Last publish

    Collaborators

    • avatar