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

1## using npm
2npm install react-use-storage-state
3
4## or using yarn
5yarn add react-use-storage-state
6
7## or using pnpm
8pnpm install react-use-storage-state

Typescript Signature

1export default useStorageState
2
3export function useStorageState<T>(
4  key: string,
5  initialState: T | (() => T),
6  storageArea?: Storage // default is localStorage
7): [state: T, setState: (newState: T | ((prevState: T) => T)) => void];
8
9export function createMemoryStorage(): Storage;

Usage

1import React from 'react'
2import { useStorageState } from 'react-use-storage-state'
3
4const Example = () => {
5  const [state, setState] = useStorageState('counter', 1)
6  function inc() {
7    setState(state + 1)
8  }
9  return (
10    <button onClick={inc}>
11      {state}
12    </button>
13  )
14}

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