Zemnmez/react-storage-hook

A react state hook that is synchronised and persisted in localStorage, and between tabs.

react-storage-hook

Javascript library for synchronously managing localStorage / sessionStorage. Typescript types included.

Installation

yarn add react-storage-hook

Usage

See also live example with sourcemaps and the local copy.

import { useStorage } from 'react-storage-hook';

const SavedCheckbox = () => {
  const [checked, setChecked] = useStorage('saved-checkbox-checked', {
    placeholder: false,
    // storageArea: sessionStorage // to use session storage instead
  })

  const onChange = e => setChecked(e.target.checked);

  return <input {...{
    checked,
    onChange,
    type: "checkbox"
  }}>
}

The checked state will be stored and synchronized between instances of the page.

The typescript types are authoratative for API scheme.