use-localstorage2

React side-effect hook that manages a single localStorage key.

Installation

To install the stable version:

$ yarn add use-localstorage2

Usage

import {useLocalStorage} from 'use-localstorage2';

const App = () => {
  const [value, setValue, remove] = useLocalStorage('my-key', 'foo');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
      <button onClick={() => remove()}>Remove</button>
    </div>
  );
};

Reference

useLocalStorage(key);
useLocalStorage(key, initialValue);
useLocalStorage(key, initialValue, {raw: true});
useLocalStorage(key, initialValue, {
  raw: false,
  serializer: (value: T) => string,
  deserializer: (value: string) => T,
});

• key — localStorage key to manage.
• initialValue — initial value to set, if value in localStorage is empty.
• raw — boolean, if set to true, hook will not attempt to JSON serialize stored values.
• serializer — custom serializer (defaults to JSON.stringify)
• deserializer — custom deserializer (defaults to JSON.parse)

License

MIT