Skip to main content

React-LocalStorage

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

Usage

A simple component: 
 var React = require('react');  
 var LocalStorageMixin = require('react-localstorage');  
 var TestComponent = module.exports = React.createClass({  
  displayName: 'TestComponent',  
  // This is all you need to do  
  mixins: [LocalStorageMixin],  
  getInitialState: function() {  
   return {counter: 0};  
  },  
  onClick: function() {  
   this.setState({counter: this.state.counter + 1});  
  },  
  render: function() {  
   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 karma as the test runner. To run the test, simply npm install all the dependencies and run: 
 ./node_modules/karma/bin/karma start


Note: Special thanks to Samuel Reed

Contact Me: sam@bitmex.com

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
Labels:

Comments

Post a Comment

Popular posts from this blog

Declarative router component for React.

http://strml.viewdocs.io/react-router-component Project Overview Usage is as simple as just returning a configured router component from your component's render() method: <Locations> <Location path="/" handler={MainPage} /> <Location path="/users/:username" handler={UserPage} /> <Location path="/search/*" handler={SearchPage} /> <Location path={/\/product\/([0-9]*)/} handler={ProductPage} /> </Locations> Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users. React router component can dispatch based on location.pathname or location.hash if browser doesn't support History API (see hash routing ). Props can be passed through the router by setting them directly on each , or to all possible routes via a childPro...
Post a Comment
Read more

react-number-editor

A react component to easily use number inputs. This one acts like those in After Effects or similar software. Click and drag to slide the value. Double-click to enter manually a new value. Use your Up/Down keys to increment/decrement the value. Hold shift key to step by bigger value. Hold control/command key to step by smaller value. Example var React = require('react'); var NumberEditor = require('react-number-editor'); React.render( <NumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} />, document.body ); Usage Here are the list of properties available for the component: min (number) the minimum value. Default no minimum max (number) the maximum value. Default no maximum step (number) the step to increment when sliding and with up/down arrows. Default 1. stepModifier (number) how much to multiply/divide with the modifier keys (shift and control/command). Default is 10. decimals (nu...
Post a Comment
Read more

react-overlays

Utilities for creating robust overlay components demos and docs at: https://react-bootstrap.github.io/react-overlays/ Install npm install --save react-overlays All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components. note: we are still in the process of abstracting out these components so the API's will probably change until we are sure that all of the bootstrap components can cleanly be implemented on top of them. Pre 1.0.0 breaking changes happen on the minor bump while feature and patches accompany a patch bump. Note: Spec...
Post a Comment
Read more