/react-use-localstorage

(seeking maintainers) ⚓ React hook for using local storage

Primary LanguageTypeScriptMIT LicenseMIT

react-use-localstorage

All Contributors

depends on stable v16.8.1~

version size minzippedsize

Access Local Storage using React hooks.

Fork it on CodeSandbox
Edit usestate-useeffect

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

Expand Changelog

3.4.0

This version "Watch changes on storage and change state".
Reference: dance2die#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

👀

Evgeny Markov

🐛 🤔

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