react-use-localstorage

react-use-localstorage

depends on stable v16.8.1~

Access Local Storage using React hooks.

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

Changelog

Expand Changelog

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

Contributors

Thanks goes to these wonderful people (emoji key):

Aaron Roberts 🤔 🐛 💻

Sung Kim 💻 🐛 📖

TheAifam5 🤔 💻 🚇

Vitor Luiz Cavalcanti 💻

Sean McPherson ⚠️ 💻

Torleif Berger 👀

This project follows the all-contributors specification. Contributions of any kind welcome!