Context Storage

React hook for sharing localStorage via context.

values are automatically converted to and from JSON.

Install

$ npm install --save context-storage

or

$ yarn add context-storage

requires: any version of react with hooks. (react >= 16.8.0)

Usage

import React from 'react'
import createStorage from 'context-storage'

const [Provider, useStorage] = createStorage('local-storage-key')

const Title = () => <h1>Hello {useStorage()[0]}!</h1>

const UserNameInput = () => {
  const [name, setName] = useStorage()
  const handleChange = ({ target }) => setName(target.value)
  return <input value={name || ''} onChange={handleChange} />
}

export const App = () => (
  <Provider>
    <Title />
    <UserNameInput />
  </Provider>
)

Arguments

key is the only required argument.

name	type	description
key	string	which key in localStorage to use
fallback	any	fallback when localStorage is empty
replacer	function︱array	passed to JSON.stringify
reviver	function	passed to JSON.parse
storage	object	with getItem and setItem methods

Implementation

the value will always be encoded as JSON when saving to localStorage. and decoded when read back.

it's safe to use objects and arrays, as long as they are non-circular.

following JSON standards, it's to be expected that, without custom replacer/reviver:

• prototypes will be lost;
• Functions will get discarded;
• Dates will be cast into ISO 8601 strings.

Map and Set can be used with custom replacer and reviver arguments.