react-save-localstorage

Save and sync your data on render phase to localStorage safely

Try it live at StackBlitz

import React, { Component } from 'react';
import SaveLocalStorage from 'react-save-localstorage';

class Home extends Component {
  state = {
    email: ''
  };
  render() {
    return (
      <div>
        {/* Mode 1: read only */}
        <SaveLocalStorage lsKey="lang">
          {lang => <div>Language: {lang || '-'}</div>}
        </SaveLocalStorage>

        {/* Mode 2: write only */}
        <SaveLocalStorage lsKey="emailBackup" value={this.state.email} />

        {/* Mode 3: dual */}
        <SaveLocalStorage value={this.state.email} lsKey="email">
          {v => (
            <div>
              <input
                value={v}
                onChange={e =>
                  this.setState({
                    email: e.target.value
                  })
                }
              />
              <div>Welcome, {v || 'Guest'}</div>
            </div>
          )}
        </SaveLocalStorage>
      </div>
    );
  }
}

Props

• lsKey (string, required)

• value (string)

• sync (bool)

  To sync after value updates, default is true

• children (func)

  Function that accept loaded value from localStorage

• onSave (func)

  Function that accept object containing:

  • init (boolean that indicated it's the first mount)
  • value (the value being saved)

  This is called for every value updates.

License

MIT