strml / react-localstorage

Simple componentized localstorage implementation for Facebook's React.

React-LocalStorage

Simply synchronize a component's state with localStorage, when available.

This is an old-style Mixin, which means it's probably compatible with your React application if it's a few years old. If you're a hip young programmer, you might prefer a hook, instead.

Install

    npm i react-localstorage --save

Usage

A simple component:

const React = require('react');
const LocalStorageMixin = require('react-localstorage');
const reactMixin = require('react-mixin');

// This is all you need to do
@reactMixin.decorate(LocalStorageMixin)
class TestComponent extends React.Component {
  static displayName = 'TestComponent';

  state = {counter: 0};

  onClick() {
    this.setState({counter: this.state.counter + 1});
  }

  render() {
    return <span onClick={this.onClick}>{this.state.counter}</span>;
  }
}

Options

The key that state is serialized to under localStorage is chosen with the following code:

function getLocalStorageKey(component) {
  if (component.getLocalStorageKey) return component.getLocalStorageKey();
  if (component.props.localStorageKey === false) return false;
  if (typeof component.props.localStorageKey === 'function') return component.props.localStorageKey.call(component);
  return component.props.localStorageKey || getDisplayName(component) || 'react-localstorage';
}

If you are synchronizing multiple components with the same displayName to localStorage, you must set a unique localStorageKey prop on the component. You may set a function as well.

Alternatively, you may define the method getLocalStorageKey on the component's prototype. This gives you the freedom to choose keys depending on the component's props or state.

To disable usage of localStorage entirely, pass false or a function that evaluates to false.

Filtering

If you only want to save parts of state in localStorage, set stateFilterKeys to an array of strings corresponding to the state keys you want to save.

getDefaultProps: function() {
  return {
    stateFilterKeys: ['one', 'two']
  };
}

You can do this by setting a stateFilterKeys prop or define the method getStateFilterKeys on the component's prototype.

getStateFilterKeys: function() {
  return ['one', 'two'];
}

Server Rendering

LocalStorageMixin will call setState on componentDidMount, so it will not break server rendering checksums. This is new as of 0.2.0.

Tests

We use jest as the test runner. To run the test, simply yarn install all the dependencies and run yarn test.

react-localstorage's Issues

Can we use react-localstorage with flux architecture?

Can we use react-localstorage with flux architecture?
This mixin seems to set the state while mounting, but in flux all the data will be stored in the Store, how to use react-localstorage with Flux.

Usage

Using this module. When or how do I go about checking if the data is stale?

I'm using localstorage to store results from an api request. If a user returns to the app at a future date the info from localstorage must be checked for staleness and initiate another request to the api for fresh data.

DOM Exception 18 on iOS when cookies are disabled.

Just by accessing localStorage here on this line, it will cause iOS Safari to throw the above exception. Which can cause the entire react app to crash.

There is a fix though, take a look at how modernizr or angular does it.

Localstorage with valueLink={this.linkState('email')} gives an error

I am trying to use localstorage in an reactClass that also contains an form with valueLink attritbute.

This generates the following error:

Error: Invariant Violation: While component Login was saving state to localStorage, the localStorage entry was modified by another actor. This can happen when multiple components are using the same localStorage key. Set the property localStorageKey on Login.

Snippet of the code.

var Login = React.createClass({
     displayName: 'Login', //Localstorage
     mixins: [LocalStorageMixin],


    submit: function(e) {
        e.preventDefault();
        User.Actions.login(this.state.email, this.state.password);
    },

    render: function() {
        var stack = this.state.form.error;

        if(this.state.form.success == true) {
            return (<div>
                        <h2>Inloggen</h2>
                        U bent nu aangemeld.
                    </div>
                    )
        } else

        return(
                <div>
                    <h2>Inloggen</h2>
                    <form>
                        <div >
                            <label htmlFor="email">Email</label>
                            <input type    ="email" valueLink={this.linkState('email')} className="form-control" id="email" placeholder="Email" />
                        </div>
                        <div >
                            <label htmlFor="pwd">Wachtwoord</label>
                            <input type    ="password" valueLink={this.linkState('password')} className="form-control" id="pwd" placeholder="Wachtwoord" />
                        </div>

                         <div className="form-group">
                            <div >
                              <button type="submit" className="btn btn-default" onClick={this.submit}>Inloggen</button>
                            </div>
                          </div>


                    </form>
                </div>
            );

    }

}); module.exports = Login;

Cant use it as es6 component

i try to use is in es6 component and my code looks like this:
class TestComponent extends Component{

constructor(props) {
super(props);

this.displayName = 'TestComponent';
this.mixins = [LocalStorageMixin];

this.state = {
  counter:0,
};

this.onClick = this.onClick.bind(this);

}

onClick() {
this.setState({
counter: this.state.counter + 1}
);
}

render() {
return (
{this.state.counter}
);
}
};

but the state dont stay when i refrash the page... - note that if i use is at regular createclass thats work...

Uncaught ReferenceError: process is not defined

How can I use this in the browser without messing around with webpack and other stuff ?

Decorator / ES6(7) support

I'm using react with ES6 classes, which doesn't support mixins.
It would be nice if this package supported ES7 decorators or higher-order components (https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)

Should store at a different key if this.props.localStorageKey

I can create a jsbin or something to demonstrate, but it appears that if the localStorageKey prop changes that it doesn't begin loading/saving to the new key.

If I'm understanding the code correctly, it not be too hard like adding a componentWillReceiveProps that reruns this.componentDidMount? I'll try to play around with this when I get a chance, but wanted to bring it up here in case you've seen this before.

it would be awesome if Dates were automatically de-serialized

Part of my state is Dates.
I have date-pickers that need those dates in the state.
When my state is saved and restored, my dates have become strings.

It would be awesome if (somehow) those dates were restored as dates.
( for extra bonus points, also make regexes automatically serialize/deserialize -- I also have one of those in my state )

In the meantime, where should I write code to de-serialize my dates?
Is there a hook?...that is called after (or during) every de-serialize?

React 0.13 is moving away from mixins

Looks like a great package! Since React is slowly moving away from mixins, do you plan any support for the new context-based way of work?