@webcored/react-local-storage

React local storage

A stateful react hook for browser storage.

Why?

• Configurable
• Defaults support
• Versions & Migrations

Usage

component.jsx

const [user, userStorage] = useLocalStorage('user');

....

userStorage.update(...user, { name: 'new name' });

typescript

const [user, userStorage] = useLocalStorage<User>('user');
  
....

userStorage.update(...user, { name: 'new name' });

sample app

javascript

typescript

typescript

Configurations

app.js

import React from 'react';
import { user } from './storages/user';

import { localStorageConfig } from "react-local-storage/config";

localStorageConfig({
  namespace: 'app',
  delimiter: '/'
  react: React
  storages: {
    user
  }
})

available configuration options

config	default	optional	description
namespace	null	true	namespace your storage keys to avoid conflicts especially in the case micro-frontends.
delimiter	/	true	delimiter between the namespace and keys, example if namespace is app then key of user will be app/user
react	null	false	react-local-storage uses useState hook internally which will be abstracted from the given react instance.
storage	window.localStorage	true	choose between local or session storage
storages	null	true	storage keys config & definition object

Key configurations

Each and every key can have its own configuration

Defaults

Configure default values to the localstorage key

const user = {
  defaults: {
    name: 'Guest',
    email: '[e-mail]'
  }
}

typescript

import { ReactLocalStorage } from "react-local-storage";

const user = ReactLocalStorage<User> {
  defaults: {
    name: 'Guest',
    email: '[e-mail]'
  }
}

Versions & Migrations

If there is a schema change in the local storage or in the default value, the storage can be simply migrated to the latest version by incrementing the version of a key. It will trigger the migrationcallback when there is a diff with version.

const user = {
  defaults: {
    name: 'Guest',
    email: '[e-mail]',
    avatar: 'example.com/guest.png'
  },
  version: 2,
  migration: (currentValue, defaultValue) {
    return Object.assign({}, ...currentValue, ...defaultValue);
  }
}

typescript

import { ReactLocalStorage } from "react-local-storage";

const user = ReactLocalStorage<User> {
  defaults: {
    name: 'Guest',
    email: '[e-mail]',
    avatar: 'example.com/guest.png'
  },
  version: 2,
  migration: (currentValue, defaultValue) {
    return Object.assign({}, ...currentValue, ...defaultValue);
  }
}