eshad/react-session

A simple object to manage client session data in a React app

react-session

A simple object to manage client session data in a React app. This is not synchronized with server side sessions.

Installation

npm install react-client-session --save

Usage

A simple example. Download and run the demo for more examples, or browse the examples here.

1. Set the storage type in the base App, and create a key value pair ... for example, username.

Supported storage types are memory, cookie, localStorage and sessionStorage.

NOTE: When using cookie store type, all key value pairs that are set via ReactSession.set(key, value); are serialized as JSON in to one single cookie called __react_session_<DOMAIN>

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { ReactSession } from 'react-client-session';

function App() {
  ReactSession.setStoreType("localStorage");
  ReactSession.set("username", "Bob");

  return (
    <div>
      <Switch>
        // Routes 
      </Switch>
    </div>
  );
}

export default App;

2. Display the username from somewhere else in your App.

import React from 'react';
import { ReactSession } from 'react-client-session';

function MyComponent() {
  const username = ReactSession.get("username");

  return (
    <p>User Name is: {username}</p>
  )
}

export default MyComponent;

Download Examples

git clone https://github.com/grizzthedj/react-session.git
cd react-session
npm install
gulp demo
Browse http://localhost:8080