Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProState saved in localStorage that is safe to server-render, syncs across tabs and components, ignores unreadable values and works when storage is blocked.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for small preferences that should survive a reload: a collapsed sidebar, a chosen view, a draft filter. Every component that uses the same key stays in sync, and so do other tabs.
Do not use it for secrets or large data. localStorage is readable by any script on the page and is limited to a few megabytes.
import { useLocalStorageState } from "@/hooks/use-local-storage-state"const [view, setView, resetView] = useLocalStorageState<"grid" | "list">(
"projects:view",
"grid"
)On the server and in the first client render the value is initialValue; the stored value replaces it right after, so there is no hydration mismatch. A stored value that cannot be parsed is ignored. When storage is blocked (private mode, disabled cookies) the hook still works for the current page but does not persist.
useLocalStorageState<T>(key: string, initialValue: T, options?): [T, setValue, remove]
| Name | Type | Default | Description |
|---|---|---|---|
key | string | - | The localStorage key. |
initialValue | T | - | Used when nothing valid is stored. |
serialize | (value: T) => string | JSON.stringify | Option: how to turn a value into a string. |
deserialize | (raw: string) => T | JSON.parse | Option: how to read a stored string back. |
setValue | (next: T | ((prev: T) => T)) => void | - | Returned: sets the value or applies an updater. |
remove | () => void | - | Returned: deletes the key and returns to initialValue. |
A hook has no markup. If the stored value changes what is on screen (a theme, a layout), make sure the first render matches the server, as this hook does, so assistive technology does not see content jump.
The hook ships with tests (use-local-storage-state.test.ts) for reading, writing, updater functions, syncing between components and tabs, an unreadable value, remove and custom serialisation.