Norvell, Please Merge

    react-session-persist
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    React Session Persist 🔑 💾

    Keep your session sync with your storage and React components.

    LIVE EXAMPLE

    Installation

    yarn: yarn add react-session-persist

    npm: npm install react-session-persist --save

    Usage

    • Wrap your app with the Session component
    import { render } from 'react-dom';
    import Session from 'react-session-persist';
     
    render(
      <Session>
        <App />
      </Session>,
      document.getElementById('app')
    );
    • Use the hook to get and handle the session inside React components
    import React from 'react';
    import { useSession } from 'react-session-persist';
     
    const MyComponent = () => {
      const { authenticated, saveSession } = useSession();
      
      const login = () => {
        saveSession({ token: '123' });
      }
      
      if (authenticated) {
        return <p>User logged in!</p>
      }
      
      return <button onClick={login}>LOG IN</button>
    }
    • Use the API to handle the session anywhere
    import { saveSession } from 'react-session-persist';
     
    const loginUser = (user) => {
      const session = await loginRequest(user);
      await saveSession(session);
    }

    Session

    This component wraps the app to keep the internal session state in sync with the storage.

    Props

    Prop Default Description
    storage cache storage Custom storage, it allows a simple storage or an async storage
    initialData undefined Optional session data. Useful if your storage is async and you want an immediate start of your app or for SSR

    useSession hook

    The hook consumes the session data and methods that the Session component provides through the context.

    {
      session, // object with session data
      authenticated, // boolean flag to check if the user is authenticated
      user, // optional object with user data
      saveSession, // promise to save the session
      removeSession, // promise to remove the session
      saveUser, // promise to save optional user data
      loadDataFromStorage // get data directly from the storage
    } = useSession()

    API

    getSession() : object

    Returns the current session if exists. Otherwise, it returns undefined.

    Example:

    import { getSession } from 'react-session-persist';
     
    const session = await getSession();

    saveSession(session: object): Promise

    Saves the session in the storage and React state. Also, it updates the authenticated flag to true.

    removeSession(): Promise

    Removes the session from the stores and React state. Also, it updates the authenticated flag to false.

    getUser() : object

    Returns the optional user data if exists. Otherwise, it returns undefined.

    saveUser(user: object): Promise

    Saves optional user data (user's name, email, etc) in the storage and React state. Also, it updates the authenticated flag to true.

    getAuthenticated(): boolean

    Returns a boolean flag that is true if there is a session in the storage.

    loadDataFromStorage(): Promise<object>

    Gets the data directly from the storage.

    Custom Storage

    You can create your own storage just providing an object with 3 methods:

    const storage = {
      getItem(key: string): Promise? or object,
      setItem(key: string, data: object): Promise? or void,
      removeItem(key: string): Promise? or void
    }

    Each method could return a promise or value. If a method returns a promise the storage is consider an async storage.

    By default react-redux-persist uses the cache storage.

    Async Storage

    Check out the async example to use another storage, this example uses localForage.

    React Native Storage

    SSR

    Keywords

    none

    Install

    npm i react-session-persist

    DownloadsWeekly Downloads

    7

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    1.36 MB

    Total Files

    63

    Last publish

    Collaborators

    • bernabe9