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.