tk-react-store
v1.1.3
Published
Store react state locally
Downloads
2
Readme
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);