useCookie

GitHub MDN Docs

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

Installation

npx sse-hooks add use-cookie

yarn dlx sse-hooks add use-cookie

pnpm dlx sse-hooks add use-cookie

deno run -A npm:sse-hooks add use-cookie

bunx sse-hooks add use-cookie

Usage

example.ts

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

// Creates a cookie named "__Secure-token"
const [token, setToken] = useCookie("token", "", {
  prefix: "__Secure-",
  secure: true,
});

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseCookieOptions<T>` Options for customization.
`key`	-	`string` The base name of the cookie.
`initialValue`	-	`T \| () => T` The initial value of the state.

Returns

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

Types Aliases

No specific type aliases defined for this component.

Changelog

81e9f — feat: update documentation and categorize hooks

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

useSessionStorage

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

useFetch

Custom hook that provides a wrapper around the native `fetch API` to handle HTTP requests with state management, abort capability, and TypeScript support.