Skip to content
react-local-storage / 1.0.1

react-local-storage 1.0.1

Install from the command line:
Learn more about npm packages
$ npm install @webcored/react-local-storage@1.0.1
Install via package.json:
"@webcored/react-local-storage": "1.0.1"

About this version

React Local Storage

A stateful react hook for browser storage.

build npm downloads typescript contributions

Why?

Install

npm install @webcored/react-local-storage

Usage

component.jsx

import { useLocalStorage } from "@webcored/react-local-storage";

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

....
typescript 

const [user, userStorage] = useLocalStorage<User>('user');
  
....
update
userStorage.update({ ...user, name: 'new name' });
remove
userStorage.remove();
reset

Reset's to the default value provided in the key config

userStorage.reset();

Sample app

View on Github
typescript

View on Github

Configurations

import React from 'react';

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

import { storageConfig } from "@webcored/react-local-storage";

storageConfig({
  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,
ie: 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

Key configurations

Each key can have its own configuration

Defaults

Configure default values to the localstorage key

import { storageKeyConfig } from "@webcored/react-local-storage"

const user = storageKeyConfig({
  defaults: {
    name: 'Guest',
    email: 'guest@email.com'
  }
})
typescript 

import { storageKeyConfig } from "@webcored/react-local-storage"

const user = storageKeyConfig<User>({
  defaults: {
    name: 'Guest',
    email: 'guest@email.com'
  }
})

Versions & Migrations

If there is a schema change required in the local storage or in its default value, the storage can be simply migrated to the latest version by incrementing the version of a key. It will invoke the given migration method when there is a conflict with version.

import { storageKeyConfig } from "@webcored/react-local-storage"

const user = storageKeyConfig({
  defaults: {
    name: 'Guest',
    email: 'guest@email.com',
    avatar: 'example.com/guest.png'
  },
  version: 2,
  migration: (currentValue, defaultValue) {
    return Object.assign({}, ...currentValue, ...defaultValue);
  }
})
typescript 

import { storageKeyConfig } from "@webcored/react-local-storage"

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

Details

Assets

  • react-local-storage-1.0.1-npm.tgz

Download activity

  • Total downloads 1
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all