JSPM

  • Created
  • Published
  • Downloads 5435
  • Score
    100M100P100Q114869F
  • License MIT

Use Local Storage with React hooks

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.0~

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

Change Log

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