Hooks

Behavior helpers.

Swirski hooks are small client-side utilities for the behavior that shows up across components: disclosure state, controlled state, outside clicks, keyboard escape, clipboard, storage and responsive preferences.

Hook entries

10

documented hooks, exported from @swirski/ui and installable through the registry CLI.

Install

Import or copy.

Hooks can be imported from the package or copied into an app with the registry CLI. Copied hooks follow dependency metadata, so `useDisclosure` also brings `useControllableState`.

import { useDisclosure, useClipboard } from "@swirski/ui";

swirski add use-disclosure use-clipboard

State

useDisclosure useControllableState useLocalStorage

Environment

useMediaQuery useReducedMotion

Interaction

useClickOutside useEscapeKey useClipboard useIsPathnameActive

Recipes

Where hooks fit.

These hooks are deliberately small. They cover the behavioral patterns that repeat across Swirski components and app screens.

Hook	Use it for
useDisclosure	Dialogs, drawers, popovers, accordions and custom show/hide UI.
useControllableState	Components that support both controlled and uncontrolled props.
useClickOutside	Menus, custom selects, floating panels and dismissible surfaces.
useClipboard	Copy buttons, registry commands, install snippets and code blocks.
useIsPathnameActive	Navigation links, sidebars, breadcrumbs and active route styling.

Example

Disclosure state.

`useDisclosure` is the everyday hook for open/close UI. It returns the current boolean state and a small handler object.

Open hook docs

const [opened, handlers] = useDisclosure(false);

return (
  <>
    <Button onClick={handlers.open}>Open</Button>
    <Button onClick={handlers.close}>Close</Button>
    <Button onClick={handlers.toggle}>Toggle</Button>
  </>
);

Hook