isabella232 / react-use-localstorage

⚓ React hook for using local storage

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);

Demo

Changelog

Expand Changelog

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 🤔 💻 🚇

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