React Trick Local Storage ·

Keep list of data as single local storage value and use it with react.

Installation

npm install react-trick-local-storage --save

Usage

Create storage in separate file:

import { createStorage } from 'react-trick-local-storage';

interface Fields {
  accessToken: string | undefined;
}

export const storage = createStorage<Fields>(
  key: 'my-app-storage-key',
);

Import storage in your react component:

import { useStorageValues } from 'react-trick-local-storage';
import { storage } from './storage';

const App: React.FC = () => {
  const [accessToken] = useStorageValues(storage, 'accessToken');

  if (accessToken) {
    return <div>Authorized</div>;
  }

  return (
    <div>
      <button onClick={() => storage.set('accessToken', 'access-token')}>
        Set access token
      </button>
    </div>
  )
}

Developer Quick Start

Project is build with tsdx CLI utility.

Node

See node installation requirements here (you need node v14.x.x): https://gist.github.com/maxsbelt/a401dd0c3da8b0e1d50c9eebd2eccf65

Editor config

In order to prevent some problems in source files related to different platforms .editorconfig file is located in the root of the project. Please install plugin for your IDE/text editor.