A stateful react hook for browser storage.
npm install @webcored/react-local-storage component.jsx
import { useLocalStorage } from "@webcored/react-local-storage"; const [user, userStorage] = useLocalStorage('user'); ....typescript
const [user, userStorage] = useLocalStorage<User>('user'); ....userStorage.update({ ...user, name: 'new name' });userStorage.remove();Reset's to the default value provided in the key config
userStorage.reset();| View on Github |  |
|---|
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 |
Each key can have its own configuration
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' } })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); } })