@reactivers/hooks Github link@reactivers/hooks NPM link



  • useLocalStorage makes local storage management easier for you.
  • It allows you keep your local storages in state optionally.
  • All your components can access and listen local storages easily.
const { getItem, setItem } = useLocalStorage("test-value");

Getting Started

  • You need to import useLocalStorage and LocalStorageProvider.
  • useLocalStorage reads data from LocalStorageProvider. So you need to wrap your entry component with LocalStorageProvider.

From Collection

import { useLocalStorage, LocalStorageProvider } from "@reactivers/hooks";

From Package

import { useLocalStorage, LocalStorageProvider } from "@reactivers/use-local-storage";



interface LocalStorageProviderProps {
    // If passed False it doesn't store the data in state.
    withState?: boolean; // Default = True

    // Calls this on any change in localStorage via useLocalStorage.
    onChange?: (localStorage: Record<string, any>) => void;


interface IUseLocalStorage {
  // If key passed, it controls and gets only the given key name.
  // Otherwise you can access all local storage.
  key?: string

interface IUseLocalStorageReturn {
    localStorage: Record<string, any>;
    getItem: (key?: string) => any;
    setItem: (value: any) => void;
    setItemWithKey: (key: string, value: any) => void;
    removeItem: (key?: string) => void;


Example Preview - CodeSandbox