Registry / storage / react-use-storage

react-use-storage

library0.5.1jsnpmunverified

React hook for syncing state with localStorage and sessionStorage. Current version 0.5.1, stable and feature-complete. Provides two hooks: useLocalStorage and useSessionStorage, each returning a [value, setter, remover] tuple similar to useState. Values are automatically synchronized across tabs/windows via the storage event. Differentiator: simple API with no dependencies beyond React 16.8+. Ships TypeScript definitions. Low release cadence, actively maintained.

storage

npm install react-use-storage

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-USE-STORAGE

react-use-storage

storagejavascriptv0.5.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useLocalStorage

✓ import { useLocalStorage } from 'react-use-storage'

✗ import useLocalStorage from 'react-use-storage'

Named export, not default.

useSessionStorage

✓ import { useSessionStorage } from 'react-use-storage'

✗ const useSessionStorage = require('react-use-storage').useSessionStorage

CommonJS require is possible but discouraged; use named import.

StorageHookReturn

✓ import type { StorageHookReturn } from 'react-use-storage'

TypeScript type export for the return type: [T, (value: T | ((prev: T) => T)) => void, () => void].

Shows basic usage of useLocalStorage with a counter, including set, reset, and remove operations.

import { useLocalStorage } from 'react-use-storage'; function Counter() { const [count, setCount, removeCount] = useLocalStorage('counter', 0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(c => c + 1)}>+</button> <button onClick={() => setCount(0)}>Reset</button> <button onClick={removeCount}>Remove</button> </div> ); }

Debug

Known issues

gotchaEnsure the key string is consistent across your app to avoid data overlap.

fix

Use a constant or namespace for storage keys.

affects: >=0.0.0

gotchaThe hook only works in browser environments; calling it during SSR (e.g., Next.js) will throw.

fix

Guard usage with typeof window !== 'undefined' or use a dynamic import.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'getItem')

Trying to use the hook during server-side rendering or when window is undefined.

fix

Check that window is defined before calling the hook, or use a safe wrapper.

Warning: React has detected a change in the order of Hooks called by ComponentName

Conditionally calling the hook or calling it inside loops/conditions.

fix

Ensure the hook is always called in the same order at the top level of a React component.

Upgrade

Version history

0.5.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React hooks

react-domoptionalPeer dependency (for React DOM)

Agent activity

19 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/leny/react-use-storage ↗

packagereact-use-storage ↗

homepagehttps://github.com/leny/react-use-storage#readme ↗