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

Rx Visualizer - Animated playground for Rx Observables https://rxviz.com

Description RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. You can also: Control the speed of the animation by modifying the Time window input. Copy the resulting SVG to include in your next Rx presentation. Share the visualization with your friends. Examples Basic interval Random error Higher order Observable Pause and resume How does it work? RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future. Technically, we subscribe to the given Observable, and, once a value is observed, we simply add it to the visualization. It's that simple! How about higher order Observables? No different. Since a higher order Observable is simply an Observable whose values ...
Post a Comment
Read more

React-Crouton - A message component for reactjs

Live Demo Getting Started Install via npm npm i react-crouton --save-dev Usage var Crouton = require('react-crouton') var data = { id: Date.now(), type: 'error', message: 'Hello React-Crouton', autoMiss: true || false, onDismiss: listener, buttons: [{ name: 'close', listener: function() { } }], hidden: false, timeout: 2000 } <Crouton id={data.id} type={data.type} message={data.message} onDismiss={data.onDismiss} buttons={data.buttons} hidden={data.hidden} timeout={data.timeout} autoMiss={data.autoMiss}> // You can render child component here // <ChildComponent /> </Crouton> Options id required, every message need an unique id. type: number message required, the message what you want show. type: string || array example: message: 'Hello React-Crouton' message: ['Hello', ...
1 comment
Read more

React Autosuggest

Demo Check out the Homepage and the Codepen examples . Features WAI-ARIA compliant , with support for ARIA attributes and keyboard interactions Mobile friendly Plugs in nicely to Flux and Redux applications Full control over suggestions rendering Suggestions can be presented as plain list or multiple sections Suggestions can be retrieved asynchronously Highlight the first suggestion in the list if you wish Supports styling using CSS Modules , Radium , Aphrodite , JSS , and more You decide when to show suggestions (e.g. when user types 2 or more characters) Always render suggestions (useful for mobile and modals) Pass through arbitrary props to the input (e.g. placeholder, type, onChange , onBlur , or any other), or take full control on the rendering of the input (useful for integration with other libraries) Thoroughly tested Installation yarn add react-autosuggest or npm install react-autosuggest --save You can also use the standalone UMD bu...
Post a Comment
Read more