react-persist-local-storage

A React hook for persisting, syncing and managing state in local storage.

Supports object and string types.

Features

• Keeps React state in sync with local storage.
• Keeps local storage in sync between windows.
• Add, update and delete local storage items.
• Type hinting when using objects!

Example Usage:

Initial value as string:

1import useLocalStorage from "react-persist-local-storage";
2
3const Example = () => {
4  const key = "example.value";
5  const [value, setValue, deleteValue] = useLocalStorage(
6    key,
7    "string value"
8  );
9
10  return (
11    <div>
12      <input
13        value={value || ""}
14        onChange={(e) => setValue(e.target.value)}
15      />
16      <p>{value}</p>
17      <button disabled={!value} onClick={() => deleteValue(key)}>
18        Delete "{key}"
19      </button>
20    </div>
21  );
22};
23
24export default Example;

Initial value as object:

1import useLocalStorage, {
2  LocalStorageValue
3} from "react-persist-local-storage";
4
5const Example = () => {
6  const key = "example.value";
7  const [value, setValue, deleteValue] = useLocalStorage(key, {
8    value: "example value"
9  });
10
11  return (
12    <div>
13      <input
14        value={JSON.stringify(value) || ""}
15        onChange={(e) =>
16          setValue(
17            JSON.parse(e.target.value) as LocalStorageValue<typeof value>
18          )
19        }
20      />
21      {/* 
22        'value' is typed! 
23        'value' is nullable as it can be removed from local storage.
24      */}
25      <p>{value?.value || ""}</p>
26      <button disabled={!value} onClick={() => deleteValue(key)}>
27        Delete "{key}"
28      </button>
29    </div>
30  );
31};
32
33export default Example;

Reference

useLocalStorage(key, initialValue, options)

Parameters

• key: The local storage key.
• initialValue: Initial value of the localstorage value.
• options.sync: Enable local storage syncing between windows.

Returns

[value, setValue, deleteItem]

1. The serialized local storage value.
2. Function for setting the local storage value.
3. Function for removing the local storage item.

Development

Requirements

• NodeJs

To install dependencies:

1npm install

Build in watch mode:

1npm run dev

Run example:

1cd ./examples
2npm run dev