Store the data throughout the session and move the data between components. You can easily move state between components.
$ npm install react-session-api
Live Demo CodeSandbox
With this component, you can create data that is stored throughout the session. You can access this data from anywhere in your project.
When the page is closed, the stored data is deleted. You can think of this data as a global state.
You can handle data changes from the Session.onSet(function UniqueName(data) { }) event and set the state of the components.
- Set and get data from all components.
- You can easily handle data changes.
- Timeout property for datas.
sessionStorageorlocalStoragebrowser property not require.
A simple example for sharing data and handling changes between components.
// Counter.jsimportReact,{Component}from'react';importSessionfrom'react-session-api'classCounterextendsComponent{constructor(){super()this.state={counter: 0}}componentDidMount(){constcounter=(data)=>{this.setState({counter: data["counter"]});};Session.onSet(counter);}render(){return(<h5>
Counter :
<spanclassName={"badge "+(this.state.counter<0 ? 'badge-warning color-white' : 'badge-primary')}>{this.state.counter}</span></h5>)}}exportdefaultCounter;// IncreaseButton.jsimportReact,{Component}from'react';importSessionfrom'react-session-api'constIncreaseButton=()=>{constonIncrease=()=>{letcounter=Session.get("counter")+1;Session.set("counter",counter);}return(<buttonclassName="btn btn-sm btn-success"onClick={(e)=>onIncrease()}>
Increase Number
</button>)}exportdefaultIncreaseButton;// DecreaseButton.jsimportReact,{Component}from'react';importSessionfrom'react-session-api'constDecreaseButton=()=>{constonDecrease=()=>{letcounter=Session.get("counter")-1;Session.set("counter",counter);}return(<buttonclassName="btn btn-sm btn-danger"onClick={(e)=>onDecrease()}>
Decrease Number
</button>)}exportdefaultDecreaseButton;Descriptions and configuration settings for component properties.
Session.set(key, value)Set session item.key{string}session item key.value{Object|string}session item value, if you are using browser storage, it can only take{string}.
Session.get(key)Get session item.key{string}session item key.
Session.remove(key)Remove session item by key.key{string}session item key.
Session.items()Get all items.Session.clear()Clear all items.Session.unmount(callbackName)Unmount callback function.callbackName{string}callback unique name.
Session.onSet(function UniqueName(data) { /* do things */ })Triggered when session data changes.datanew data set.
config(browserStorage = false, timeout = 0)Set session config.browserStorage{bool}use browser sessionStorage.timeout{number}session timeout period, in minutes.
Barış Ateş