useStorage

Hooks for localStorage and sessionStorage with React state synchronization.

They work like React state hooks, but automatically keep the stored value in sync with the corresponding storage, making it easy to save and retrieve data across page reloads or sessions.

To prevent hydration errors, you can wrap your component in a ClientOnly component or use useIsMounted.

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/useStorage.json

Usage

useSessionStorage

import { useSessionStorage } from "@/hooks/useStorage";

const [sessionStorageValue, setSessionStorageValue] = useSessionStorage(
  "user-name",
  "",
);

useLocalStorage

import { useLocalStorage } from "@/hooks/useStorage";

const [localStorageValue, setLocalStorageValue] = useLocalStorage(
  "user-name",
  "",
);