Narcoleptic Programmers' Medicine

    react-session-api

    1.1.0 • Public • Published

    react-session-api

    Store the data throughout the session and move the data between components. You can easily move state between components.

    npm package Build Status Dependencies Status Package Size

    Getting started

    Install with NPM:

    $ npm install react-session-api
    

    Usage

    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.

    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.

    Default Theme

    // 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 (
          <h5>
            Counter :
            <span
              className={"badge " + (this.state.counter < 0 ? 'badge-warning color-white' : 'badge-primary')}>
              {this.state.counter}
            </span>
          </h5>
        )
      }
    }
     
    export default Counter;
    // 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 (
            <button
                className="btn btn-sm btn-success"
                onClick={(e) => onIncrease()}>
                Increase Number
            </button>
        )
    }
     
    export default IncreaseButton;
    // 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 (
            <button
                className="btn btn-sm btn-danger"
                onClick={(e) => onDecrease()}>
                Decrease Number
            </button>
        )
    }
     
    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ş

    Install

    npm i react-session-api

    DownloadsWeekly Downloads

    344

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    17

    Last publish

    Collaborators

    • barisates