SSE Hooks

useSessionStorage

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

Installation

npx sse-hooks add use-session-storage

yarn dlx sse-hooks add use-session-storage

pnpm dlx sse-hooks add use-session-storage

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

bunx sse-hooks add use-session-storage

Usage

example.ts

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

const [count, setCount, removeCount] = useSessionStorage("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`	`{}`	`UseSessionStorageOptions<T>` Options for customizing the behavior of serialization and deserialization (optional).
`key`	-	`string` The key under which the value will be stored in session 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

useReadLocalStorage

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

useCookie

Custom hook that manages state synchronized with a browser `cookie`. It handles serialization, prefixes, updates across tabs, and custom event synchronization.