tk-react-store

Store State Locally

storeState(state, *optional)(Component)

*optional: 'loadFromLocal' -> state will load from LocalStorage if it existed

  ... 
  export default storeState(state, 'loadFromLocal')(App);

changeState(state, *optional)

state: obj state

*optional: 'saveToLocal' -> state will save in storage

  <div onClick={() => changeState({stateA: true}, 'saveToLocal')}> Button </div>
  <div onClick={() => changeState({stateB: true})}> Button </div>
  <!-- It will save stateA to LocalStorage and stateB will not -->

Example

<!-- list of state -->
const state = [
  { showVideo: false },
  { showExercise: false },
  { showDocument: false},
]

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { storeState, changeState } = this.props;
    const { showVideo, showExercise, showDocument } = storeState;

    return (
      <div className="App">
        <span>showVideo: {showVideo ? 'True' : 'False'}</span>
        <br></br>
        <span>showExercise: {showExercise ? 'True' : 'False'}</span>
        <br></br>
        <span>showDocument: {showDocument ? 'True' : 'False'}</span>
        <br></br>
        <div onClick={() => changeState({ showVideo: !showVideo }, 'saveToLocal')}>
          <button>Click To toggle State showVideo</button>
        </div>
        <div onClick={() => changeState({ showExercise: !showExercise }, 'saveToLocal')}>
          <button>Click To toggle State showVideo</button>
        </div>
        <div onClick={() => changeState({ showDocument: !showDocument })}>
          <button>Click To toggle State showDocument</button>
        </div>
      </div>
    );
  }
}

export default storeState(state, 'loadFromLocal')(App);