react-use-persist v1.1.4

React-Use-Persist

Persistent State Hooks. Combines the syntax and APIs of useState and useReducer with localStorage and sessionStorage to make state persistence easy and clean.

API Reference

• useLocalState | useSessionState

  // localStorage
  const [state, setState, remove] = useLocalState(key, initialState, { writeInit }); 
  // sessionStorage
  const [state, setState, remove] = useSessionState(key, initialState, { writeInit });

  Options:

  • key: string
    • Required
    • Storage unique identifier
  • initialState: any
    • Optional initial value
  • writeInit
    • By default, state does not persist on initialization. However, if for some reason this is needed, simply mark this true.

• useLocalReducer | useSessonReducer

  // localStorage
  const [state, dispatch, remove] = useLocalReducer(key, reducer, initialState, { writeInit });
  // sessionStorage
  const [state, dispatch, remove] = useSessionReducer(key, reducer, initialState, { writeInit });

  Options:

  • key: string
    • Required
    • Storage unique identifier
  • reducer
    • Required
    • Any reducer function
  • initialState: any
    • Optional initial value
  • writeInit
    • By default, state does not persist on initialization. However, if for some reason this is needed, simply mark this true.

Returns:

• state, setStateOrDispatch, remove
  • The first two arguments will be identical to those returned by React's useState and useReducer hooks.
  • A third argument remove is provided. Calling remove will clear the state and the key from the persistent storage.

Example

https://codesandbox.io/s/react-use-persist-07elu?file=/src/App.js