react-cool-storage

React hooks and hocs with a common API for storing state outside of React. Query string, local storage etc. 😎

github | npm | api documentation

What is it?

React Cool Storage is a collection of React hooks and higher order components that give you a consistent API for interacting with data stored outside of React.

  • All storage mechanisms can contain deeply nested data, and all JSON-compatible types will be retained.
  • React Cool Storage allows fallback storage mechanisms to be defined, so your apps can still operate if resources such as localStorage are not available.
  • All storage mechanisms that don’t require props can be accessed and changed outside of React, and all hooks and hocs will update and remain in sync.

How do you use it?

  • Choose your storage mechanism(s)
  • Put them in a ReactCoolStorageHook or a ReactCoolStorageHoc
  • Get your value using ReactCoolStorageMessage.value. This is always an object, which you can fill with whatever data you like.
  • Set your value using ReactCoolStorageMessage.onChange(newPartialValue). This always expects an object, which you can fill with whatever data you like. The new object is shallowly merged onto any existing data.

Getting Started

Do this:

yarn add react-cool-storage 😎

Then you can write something like this:

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

const useStorage = ReactCoolStorageHook(
    WebStorage({
        key: 'myKey'
    })
);

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

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

API Summary

React Bindings

Storage Mechanisms


Development

Dataparcels is written and maintained by Damien Clarke, with feedback from Allan Hortle and others at Blueflag. All online library discussion happens over on Github.

Ideas for the future

  • IndexedDB
  • Cookies
  • Google Sheets API
  • Any more?