React Simple Storage

A simple component and helper functions for using web storage with React.

Check out the demo app and basic example. https://ryanjyost.github.io/react-simple-storage-example-project

You may also want to check out my related Hacker Noon article, How to take advantage of Local Storage in your React projects, for some context and logic behind this project.

Good use cases for react-simple-storage

• Persist and experiment with a component's state while developing.
• Save form data across user sessions.
• A simple, quick fake backend for a practice or portfolio project.
• More I can't think of...

Install

Install via yarn.

yarn add react-simple-storage

Using on IE11

For react-simple-storage to work on IE11, you'll need to use babel-polyfill.

yarn add babel-polyfill

Then import in your project.

import "babel-polyfill";

Usage

Component

Import and include an instance of react-simple-storage in a component whose state you want to save to web storage.

1import React, { Component } from "react";
2import SimpleStorage from "react-simple-storage";
3
4export default class ParentComponent extends Component {
5  constructor(props) { 
6    super(props)
7    this.state = {
8      text: "",
9    }
10  }
11
12  render() {
13    return ( 
14      <div>
15      
16        // include the component somewhere in the parent to save the parent's state in web storage
17        <SimpleStorage parent={this} />
18
19        // the value of this input will be saved in web storage
20        <input
21          type="text"
22          value={this.state.text}
23          onChange={e => this.setState({ text: e.target.value })}
24        />
25        
26      </div>
27    ) 
28  }
29}

Props

Name	Type	Required?	Default	Description
parent	object	Yes	none	reference to the parent component, i.e. this
prefix	string	No	""	prefix added to storage keys to avoid name clashes across instances
blacklist	array	No	[]	a list of parent component's state names/keys to ignore when saving to storage
onParentStateHydrated	func	No	none	fires after the parent component's state has been updated with storage items. Basically a callback for working with the parent component's state once updated with storage.

Helper Functions

clearStorage(prefix)

Clears items in storage with the given prefix, or all items if no prefix is given.

• prefix: String | optional - Corresponds to prefix prop passed to an instance of the react-simple-storage component.

Example

1import React, { Component } from "react";
2import SimpleStorage, { clearStorage } from "react-simple-storage";
3
4export default class ParentComponent extends Component {
5  constructor(props) { 
6    super(props)
7    this.state = {
8      text: "",
9    }
10  }
11
12  render() {
13    return ( 
14      <div>
15      
16        // provide a prefix prop to be able to clear just the storage items 
17        // created by this instance of the react-simple-storage component
18        <SimpleStorage parent={this} prefix={"ParentComponent"} />
19
20        <input
21          type="text"
22          value={this.state.text}
23          onChange={e => this.setState({ text: e.target.value })}
24        />
25        
26        // removes only storage items related to the ParentComponent
27        <button onClick={() => clearStorage("ParentComponent")}>
28          Clear storage for ParentComponent
29        </button>
30        
31         // removes all items from storage
32        <button onClick={() => clearStorage()}>
33          Clear all storage
34        </button>
35        
36      </div>
37    ) 
38  }
39}

resetParentState(parent, initialState, keysToIgnore)

Resets the parent's state to given initialState.

• parent: Object | required - Reference to the parent component, allowing react-simple-storage to access and update the parent component's state. If called within the parent component, simply pass this.
• initialState: Object | required - The state of the parent component after the function executes.
• keysToIgnore: Array | optional - A list of keys in the parent component's state to ignore on resetParentState . These pieces of that parent's state will NOT be reset.

Example

1import React, { Component } from "react";
2import SimpleStorage, { resetParentState } from "react-simple-storage";
3
4export default class ParentComponent extends Component {
5  constructor(props) { 
6    super(props)
7    this.state = {
8      text: "Initial Text",
9    }
10    
11    // store the component's initial state to reset it
12    this.initialState = this.state;
13  }
14
15  render() {
16    return ( 
17      <div>
18      
19        <SimpleStorage parent={this} />
20
21        <input
22          type="text"
23          value={this.state.text}
24          onChange={e => this.setState({ text: e.target.value })}
25        />
26        
27        // will set "text" in state to "Initial Text"
28         <button onClick={() => resetParentState(this, this.initialState)}>
29           Reset parent state
30         </button>
31        
32        // ignores "text" on reset, so will have no effect here
33        <button onClick={() => resetParentState(this, this.initialState, ['text'])}>
34          Do NOT reset text
35        </button>
36        
37      </div>
38    ) 
39  }
40}

Built with

• store.js - Cross-browser storage for all use cases, used across the web.

License

This project is licensed under the MIT License - see the LICENSE.md file for details