react-use-storage-state

React use hook for shared and persisted state

Imagine like recoil or redux without reducer and actions combined with localStorage.

This package provider simpler development experiment (DX) for shared state than redux. You can update the shared state directly, without writing verbose code to ~~obtain dispatcher, create action, dispatch action, construct new state in reducer, and return sub-state in selector~~.

Features

• Auto save and restore state across page refresh
• Shared state across multiple components (realtime update)
• Familiar usage as React.useState()
• Auto reset state when initialState is changed
• Support any JSON-compatible data type (not just string)
• Error handling when storage permission is denied or passing non-serializable object (e.g. with cyclic reference)
• Include in-memory storage adapter [1]

Remark:

[1]: For state shared in the same browser tab, but isolated across different browser tab.

Demo: https://react-use-storage-state-demo.surge.sh

Install

## using npm
npm install react-use-storage-state

## or using yarn
yarn add react-use-storage-state

## or using pnpm
pnpm install react-use-storage-state

Typescript Signature

export default useStorageState

export function useStorageState<T>(
  key: string,
  initialState: T | (() => T),
  storageArea?: Storage // default is localStorage
): [state: T, setState: (newState: T | ((prevState: T) => T)) => void];

export function createMemoryStorage(): Storage;

Usage

import React from 'react'
import { useStorageState } from 'react-use-storage-state'

const Example = () => {
  const [state, setState] = useStorageState('counter', 1)
  function inc() {
    setState(state + 1)
  }
  return (
    <button onClick={inc}>
      {state}
    </button>
  )
}

Details see DemoApp.tsx

License

This project is licensed with BSD-2-Clause

This is free, libre, and open-source software. It comes down to four essential freedoms [ref]:

• The freedom to run the program as you wish, for any purpose
• The freedom to study how the program works, and change it so it does your computing as you wish
• The freedom to redistribute copies so you can help others
• The freedom to distribute copies of your modified versions to others