1npm i @utilityjs/use-persisted-state | yarn add @utilityjs/use-persisted-state

Usage

1const App: React.FC = () => {
2  const [state, setState] = usePersistedState(0, { name: "count" });
3
4  return (
5    <div className="app">
6      <button onClick={() => void setState(v => v + 1)}>Increase</button>
7      <div>{state}</div>
8    </div>
9  );
10};

API

usePersistedState(initialState, persistOptions)

1type StorageValue<T> = {
2  state: T;
3};
4
5interface PersistOptions<T> {
6  /** Name of the storage (must be unique) */
7  name: string;
8  /**
9   * A function returning a storage.
10   * The storage must fit `window.localStorage`'s api.
11   *
12   * @default () => localStorage
13   */
14  getStorage?: () => Storage | null;
15  /**
16   * Use a custom serializer.
17   * The returned string will be stored in the storage.
18   *
19   * @default JSON.stringify
20   */
21  serializer?: (state: StorageValue<T>) => string;
22  /**
23   * Use a custom deserializer.
24   * Must return an object matching StorageValue<State>
25   *
26   * @param str The storage's current value.
27   * @default JSON.parse
28   */
29  deserializer?: (str: string) => StorageValue<T>;
30}
31
32declare const usePersistedState: <T>(
33  initialState: T,
34  options: PersistOptions<T>
35) => [T, React.Dispatch<React.SetStateAction<T>>];

initialState

The initial value of the state.

persistOptions

The options to adjust the persistence behavior.

persistOptions.name

The name of the storage (must be unique).

persistOptions.getStorage

default: () => localStorage

A function returning a storage. The storage must fit window.localStorage's api.

persistOptions.serializer

default: JSON.stringify

A custom serializer. The returned string will be stored in the storage.

persistOptions.deserializer

default: JSON.parse

A custom deserializer. Must return an object matching StorageValue<State>