ReactCoolStorageHook is a React hook that accepts a number of storage mechanisms. It returns a ReactCoolStorageMessage containing the value and a function to change the value.

This is also available as a hoc.

import ReactCoolStorageHook from 'react-cool-storage';

Example usage

import React from 'react';
import ReactCoolStorageHook from 'react-cool-storage';
import WebStorage from 'react-cool-storage/WebStorage';

const useStorage = ReactCoolStorageHook(
        key: 'myKey'

export default (props) => {
    let localStorage = useStorage(props);

    return <div>
        <label>localStorage foo</label>
            value={ || ""}
            onChange={(event) => localStorage.onChange({
                foo: event.currentTarget.value
        <label>localStorage bar</label>
            value={ || ""}
            onChange={(event) => localStorage.onChange({
                bar: event.currentTarget.value


const useStorage = ReactCoolStorageHook(
    ...storageMechanisms: StorageMechanism[]
  • ...storageMechanisms : StorageMechanism[]
    One or more storage mechanisms. If more than one storage mechanism is provided, the first available one is used on component mount. This allows you to set fallback storage mechanisms. If none are available, the last one will be used, and the hook will return a ReactCoolStorageMessage describing the error about why itโ€™s not available.


  • useStorage : Function / React hook
    The returned useStorage hook can be used in one or more components like any other React hook.

useStorage hook


let message = useStorage(props);
  • props : Object / React props
    All useStorage hooks expect to be passed all props. These may or may not be used depending on the available storage mechanisms.


  • ReactCoolStorageMessage : ReactCoolStorageMessage
    The useStorage hook returns a ReactCoolStorageMessage, which is used to get and set the value in storage.


ReactCoolStorageMessage {
    value: Object;
    onChange: (newPartialValue: Object) => void,
    valid: boolean;
    available: boolean;
    availabilityError: ?string;
    storageType: string;
  • value : Object = {}

    The current value. Defaults to an object with keys and values.

  • onChange : (newPartialValue: Object) => void

    A callback to change the value. Defaults to requiring an object with keys and values. Values are shallowly merged into the exisiting value. Setting any key to undefined will remove that key / value pair.

  • valid : boolean

    Indicates whether the value in the chosen storage is able to be parsed correctly. When false, value defaults to an empty object.

  • available : boolean

    Indicates whether any storage mechanism is available to use. When false, value defaults to an empty object and onChange has no effect.

  • availableError ?: string

    If no storage mechanisms are available, this contains the error message describing why.

  • storageType : string

    The type of the storage mechanism currently active.