useLocalStorage

NewSSR SAFE

Syncs state with localStorage across browser sessions.

$ pnpm dlx shadcn@latest add @byphongphan/use-local-storage

Requires @byphongphan in components.json

browser

use-local-storage.tsx

LocalStorage

demo_notifications_enabled

Push Notifications

Current statusEnabled

Changes are saved automatically.Persistent

Try reloading to test persistence.

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-local-storage

Requires @byphongphan in components.json

Usage

import { useLocalStorage } from "@/shared/hooks"
export function ThemeToggle() {  const [theme, setTheme] = useLocalStorage<"light" | "dark">("app_theme", "dark")
  return (    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>      Current Theme: {theme}    </button>  )}

Props & Parameters

Param	Type	Default	Description
`key`	`string`	—	Unique key identifier in browser localStorage.
`initialValue`	`T \| (() => T)`	—	Fallback initial value if no stored value exists in localStorage.
`options.serializer`	`(value: T) => string`	`JSON.stringify`	Custom serializer function for complex objects or models.
`options.deserializer`	`(value: string) => T`	`JSON.parse`	Custom deserializer function.

Returns

Return	Type	Description
`storedValue`	`T`	Current synchronized state value from localStorage.
`setValue`	`(value: T \| ((prev: T) => T)) => void`	Setter function supporting direct values and functional updater callbacks.
`removeValue`	`() => void`	Removes the key from localStorage and resets state back to initial value.

useLocalStorage

Installation

Usage

Props & Parameters

Returns

Command Palette