use-persisted-state-any

Modified version of use-persisted-state to support any type besides JSON itself.

A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.

Note: This package is forked from donavon/use-persisted-state and updated to work with React 18.2.

use-persisted-state is not a hook itself, but is a factory that accepts a storage key and an optional storage provider (default = localStorage) and returns a hook that you can use as a direct replacement for useState.

Features

💾 Persists the state to localStorage

🖥 Syncs between tabs and/or browser windows

📑 Shares state w/multiple hooks on a page

Requirement

To use use-persisted-state, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ npm i use-persisted-state

Example

Let's take a look at how you can use use-persisted-state. Here we have an example of a typical up/down counter.

import { useState } from 'react';

const useCounter = (initialCount) => {
  const [count, setCount] = useState(initialCount);

  return {
    count,
    increment: () => setCount((currentCount) => currentCount + 1),
    decrement: () => setCount((currentCount) => currentCount - 1),
  };
};

export default useCounter;

Let's replace the import of react with an import from use-persisted-state. And we'll call createPersistedState (the factory function). This will return a useCounterState hook that we can use in place of useState.

The complete code is as follows.

import createPersistedState from 'use-persisted-state';

const useCounterState = createPersistedState('count');

const useCounter = (initialCount) => {
  const [count, setCount] = useCounterState(initialCount);

  return {
    count,
    increment: () => setCount((currentCount) => currentCount + 1),
    decrement: () => setCount((currentCount) => currentCount - 1),
  };
};

export default useCounter;