Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barisates/react-session-api
Store data throughout the session and move between components.
https://github.com/barisates/react-session-api
localstorage react react-session reactjs reactjs-components session session-api session-storage sessionstorage
Last synced: 2 days ago
JSON representation
Store data throughout the session and move between components.
- Host: GitHub
- URL: https://github.com/barisates/react-session-api
- Owner: barisates
- License: mit
- Created: 2019-10-02T19:36:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-09T14:11:24.000Z (about 5 years ago)
- Last Synced: 2024-10-03T15:48:48.961Z (about 1 month ago)
- Topics: localstorage, react, react-session, reactjs, reactjs-components, session, session-api, session-storage, sessionstorage
- Language: JavaScript
- Homepage: https://barisates.github.io/react-session-api/
- Size: 256 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-session-api
Store the data throughout the session and move the data between components. You can easily move state between components.
[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependencies Status][david-image]][david-url]
[![Package Size][bundlephobia-image]][bundlephobia-url]
## Getting started
#### Install with NPM:
```
$ npm install react-session-api
```
#### Usage
**Live Demo [CodeSandbox](https://codesandbox.io/s/react-session-api-xmg9v "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.
##### Features
- Set and get data from all components.
- You can easily handle data changes.
- Timeout property for datas.
- ```sessionStorage``` or ```localStorage``` browser property not require.
#### Example
A simple example for sharing data and handling changes between components.
```jsx
// Counter.js
import React, { Component } from 'react';
import Session from 'react-session-api'
class Counter extends Component {
constructor() {
super()
this.state = {
counter: 0
}
}
componentDidMount() {
const counter = (data) => {
this.setState({ counter: data["counter"] });
};
Session.onSet(counter);
}
render() {
return (
Counter :
{this.state.counter}
)
}
}
export default Counter;
```
```jsx
// IncreaseButton.js
import React, { Component } from 'react';
import Session from 'react-session-api'
const IncreaseButton = () => {
const onIncrease = () => {
let counter = Session.get("counter") + 1;
Session.set("counter", counter);
}
return (
onIncrease()}>
Increase Number
)
}
export default IncreaseButton;
```
```jsx
// DecreaseButton.js
import React, { Component } from 'react';
import Session from 'react-session-api'
const DecreaseButton = () => {
const onDecrease = () => {
let counter = Session.get("counter") - 1;
Session.set("counter", counter);
}
return (
onDecrease()}>
Decrease Number
)
}
export default DecreaseButton;
```
#### Properties
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.
##### Events
- **```Session.onSet(function UniqueName(data) { /* do things */ })``` Triggered when session data changes.**
- ```data``` new data set.
##### Configuration
- **```config(browserStorage = false, timeout = 0)``` Set session config.**
- ```browserStorage``` ```{bool}``` use browser sessionStorage.
- ```timeout``` ```{number}``` session timeout period, in minutes.
------------
#### Author
**Barış Ateş**
- http://barisates.com
- [github/barisates](https://github.com/barisates "github/barisates")
[npm-image]:https://img.shields.io/npm/v/react-session-api.svg
[npm-url]:https://www.npmjs.com/package/react-session-api
[travis-image]:https://travis-ci.org/barisates/react-session-api.svg?branch=master
[travis-url]:https://travis-ci.org/barisates/react-session-api
[david-image]:https://david-dm.org/barisates/react-session-api.svg
[david-url]:https://david-dm.org/barisates/react-session-api
[bundlephobia-image]:https://badgen.net/bundlephobia/minzip/react-session-api
[bundlephobia-url]:https://bundlephobia.com/result?p=react-session-api