SSE Hooks

useTernaryDarkMode

Custom hook that manages ternary (system, dark, light) dark mode with local storage support.

Installation

npx sse-hooks add use-ternary-dark-mode

yarn dlx sse-hooks add use-ternary-dark-mode

pnpm dlx sse-hooks add use-ternary-dark-mode

deno run -A npm:sse-hooks add use-ternary-dark-mode

bunx sse-hooks add use-ternary-dark-mode

Usage

example.ts

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

const {
  isDarkMode,
  ternaryDarkMode,
  setTernaryDarkMode,
  toggleTernaryDarkMode,
} = useTernaryDarkMode({ defaultValue: "dark" });
// Access and use the dark mode state and provided helper functions.

API

Parameters

Prop	Default	Type
`options`	`{}`	`TernaryDarkModeOptions` Options or the local storage key for the hook.

Returns

Return Value	Default	Type
`isDarkMode`	-	`boolean` The current state of the dark mode.
`setTernaryDarkMode`	-	`Dispatch<SetStateAction<TernaryDarkMode>>` A function to set the dark mode state.
`ternaryDarkMode`	-	`"system" \| "dark" \| "light"` The current state of the dark mode.
`toggleTernaryDarkMode`	-	`() => void` A function to toggle the dark mode state.

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

useScrollLock

A custom hook that locks and unlocks scroll.

useClickAnyWhere

Custom hook that handles click events anywhere on the document.