SSE Hooks

useLocalStorage

Custom hook that uses the localStorage API to persist state across page reloads.

Installation

npx sse-hooks add use-local-storage

yarn dlx sse-hooks add use-local-storage

pnpm dlx sse-hooks add use-local-storage

deno run -A npm:sse-hooks add use-local-storage

bunx sse-hooks add use-local-storage

Usage

example.ts

import { useLocalStorage } from "./{hooks file}";

const [count, setCount, removeCount] = useLocalStorage("count", 0);
// Access the `count` value, the `setCount` function to update it and `removeCount` function to remove the key from storage.

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseLocalStorageOptions<T>` Options for customizing the behavior of serialization and deserialization (optional).
`key`	-	`string` The key under which the value will be stored in local storage.
`initialValue`	-	`T \| () => T` The initial value of the state or a function that returns the initial value.

Returns

Return Value	Default	Type
`[0]`	-	`T`
`[1]`	-	`Dispatch<SetStateAction<T>>`
`[2]`	-	`() => void`

Types Aliases

No specific type aliases defined for this component.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

useIndexedDB

Custom hook that provides an interface to the `IndexedDB API` for client-side storage of significant amounts of structured data.

useReadLocalStorage

Custom hook that reads a value from `localStorage`, closely related to `useLocalStorage()`.