ReactCoolStorageHoc is a React higher order component that accepts a name and a number of storage mechanisms, providing access to storage mechanisms via props.

This is also available as a hook.

import ReactCoolStorageHoc from 'react-cool-storage/ReactCoolStorageHoc';

Example usage

import React from 'react';
import ReactCoolStorageHoc from 'react-cool-storage/ReactCoolStorageHoc';
import ReactRouterStorage from 'react-cool-storage/ReactRouterStorage';

const withStorage = ReactCoolStorageHoc(
        method: "replace"

const MyComponent = (props) => {
    let {query} = props;

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

export default withStorage(MyComponent);


    name: string,
    ...storageMechanisms: StorageMechanism[]
  • name : string

    The name of the prop that ReactCoolStorageHoc will provide.

  • ...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.


  • withStorage : (Component: ComponentType) => ComponentType
    Returns a function ready to accept a component. ReactCoolStorageHoc passes down a prop of name containing a ReactCoolStorageMessage to the component.


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.