storagehooks

usestorage

React hooks for connecting component state to state in localStorage and sessionStorage.

Features:

• Supports localStorage and sessionStorage
• Values may be any JSON data type
• Listens to storage events to detect changes to storage state
• Simple API (similar to React's useState())

Usage

Import useLocalStorage or useSessionStorage (based on your preferred Web Storage location)

import {useLocalStorage, useSessionStorage} from 'usestorage';

function myComponent(props) {
  // Use it like `useState()`, but provide name of storage key as the first argument
  const [localValue, setLocalValue] = useLocalStorage('myKey', 'initial value');
  const [sessionValue, setSessionValue] = useSessionStorage('myKey', 'initial value');

  return <>
    <label>Value in localStorage:</label>
    <input value={localValue} onChange={e => setLocalValue(e.target.value)} />

    <label>Value in sessionStorage:</label>
    <input value={sessionValue} onChange={e => setSessionValue(e.target.value)} />
  </>;
}