use-local-storage-set-state

This project has been deprecated in favor of using https://github.com/mcrowder65/mooks

This hook is available in that project.

Simple React.useState that sits on top of localStorage

Example:

import React from "react";
import useState from "use-local-storage-set-state";
 
function MyComponent() {
  const [value, setValue] = useState(
    false,
    "name-of-local-storage-key"
  );
 
  return <button onClick={() => setValue(!value)}>{String(value)}</button>;
}
 
export default MyComponent;

And on refreshes, the value will persist.

Usage in tests

Under the hood, this module is obviously using localStorage. When using this with jest, you will run into errors since jest does not have localStorage. Which is why this package requires jest-localstorage-mock as a peerDependency.

In order to get your tests to work, run npm install -D jest-localstorage-mock, and then in your jest configuration, add:

"setupFiles": [
  "jest-localstorage-mock"
]