react-use-localstorage

depends on stable v16.8.1~

version size minzippedsize

Fork it on CodeSandbox

How to use it

import React from 'react';
import ReactDOM from 'react-dom';
import useLocalStorage from 'react-use-localstorage';

import './styles.css';

function App() {
  const [item, setItem] = useLocalStorage('name', 'Initial Value');

  return (
    <div className="App">
      <h1>Set Name to store in Local Storage</h1>
      <div>
        <label>
          Name:{' '}
          <input
            type="text"
            placeholder="Enter your name"
            value={item}
            onChange={(e) => setItem(e.target.value)}
          />
        </label>
      </div>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Note for SSR (server-side rendering)

If you are using Gatsby or other SSR frameworks, such as Next.js, refer to this workaround by @hencatsmith.

You need to make sure that window is available.

const useSsrLocalStorage = (
  key: string,
  initial: string
): [string, React.Dispatch<string>] => {
  return typeof window === 'undefined'
    ? [initial, (value: string) => undefined]
    : useLocalStorage(key, initial);
};

Demo

demo

Changelog

<summary>Expand Changelog</summary> 3.4.0 This version "Watch changes on storage and change state".
Reference: https://github.com/dance2die/react-use-localstorage/pull/30 Thank you @VitorLuizC for the PR and @Svish for the review. 3.3.0 Reverted the implementation of setValue to set localStorage value directly, instead of depending on useEffect.
Reference: window.localstorage updated after value managed by useLocalStorage #29 3.2.1 The library is covered by test. Thank you so much, @SeanMcP~ 3.0.0 Decided to go with @TheAifam5 the following breaking change as the type is derived from React type definition. - Breadking change: setIteme type is changed from (item: string) => void () to React.Dispatch<string> - Updated infrastructure by @TheAifam5 🙏 in PR #13 - Dropped babel in favor of tsc + uglifyjs - Replaced npm with yarn - Added husky for pre-commit git hooks - Source map has been dropped from distribution - distribution is moved from dist to lib folder 2.4.1 - Added useLocalStorage return type explicitly to generate correct index.d.ts typing file. 2.4.0 - Added TypeScript typings as suggested by @TheAifam5 in Issue #9 2.3.0 - Fixed a bug where initial value is returned all the time #7 by @lilasquared 🙏 2.2.0 - Sets initial value in local storage 2.1.0 - Can optionally pass an initial value - This is to prevent form field from being uncontrolled. 2.0.0 - Breaking change - setItem doesn't require key 1.1.1 - Updated to React v16.8.1, which contains the patched Hooks 1.1.0 - Updated dev dependency version 1.0.0 - Updated to React v16.8.0, which contains the stable Hooks 0.0.6 - Changed the language from JavaScript to TypeScript - It has minimized the distribution file greatly