Package Exports

react-use-localstorage

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-localstorage) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-use-localstorage

depends on stable v16.8.1~

version size minzippedsize

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

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!