⚓ React hook for using local storage
Branch: master
Clone or download
Latest commit 9477853 Feb 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Improvements (#13) Feb 11, 2019
.all-contributorsrc docs: add TheAifam5 as a contributor (#14) Feb 11, 2019
.editorconfig Improvements (#13) Feb 11, 2019
.gitignore Improvements (#13) Feb 11, 2019
.markdownlint.json
.npmignore Improvements (#13) Feb 11, 2019
.prettierignore Improvements (#13) Feb 11, 2019
.prettierrc Improvements (#13) Feb 11, 2019
LICENSE Added README & License Oct 26, 2018
README.md 🛠 Updated README & added contributors in package.json Feb 11, 2019
package.json 3.0.0 Feb 11, 2019
react-use-localstorage.gif Added README & License Oct 26, 2018
tsconfig.json Improvements (#13) Feb 11, 2019
tslint.json Improvements (#13) Feb 11, 2019
yarn.lock

README.md

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

Demo

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
Aaron Roberts

🤔 🐛 💻
Sung Kim
Sung Kim

💻 🐛 📖
TheAifam5
TheAifam5

🤔 💻 🚇

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