Skip to content

Hooks

Per-hook API reference for the headless hooks that power @diffgazer/ui.

The headless hooks behind @diffgazer/ui. Each is standalone — it takes a ref or options, returns state or props, and carries no runtime dependencies (except listbox, which reuses the keys navigation engine). Copy any of them with dgadd add ui/<hook>, or import from the package.

State

HookUse it for
controllable-stateA control that supports both controlled and uncontrolled modes via value, defaultValue, and onChange.
form-resetResetting an uncontrolled custom control when its enclosing native <form> resets.
presenceKeeping an element mounted through its CSS exit animation, then unmounting after it ends.
copy-to-clipboardCopying text to the clipboard with copied/failed feedback that resets after a delay.

Positioning & overflow

HookUse it for
floating-positionAnchoring floating content to a trigger with 4-side placement, flip, shift, and collision detection.
floating-indicatorSliding one indicator (tab marker, segmented pill) to the active child by measuring its rect.
overflow-detectionDetecting whether an element's content overflows horizontally, vertically, or either.
overflow-itemsMeasuring how many items fit in a container and tracking the overflow count.

Interaction

HookUse it for
listboxSelection, highlight, ARIA, and keyboard navigation for listbox- or menu-pattern lists.
useOutsideClickClosing a dropdown, popover, or dialog when the user clicks outside a referenced element; the same source file also exports useEscapeKey for Escape dismissal stacks.

Refs

HookUse it for
composed-refsMerging internal and consumer refs into one stable callback ref.

Document

HookUse it for
active-headingTracking the active heading for a table of contents (top-line or viewport-center activation, with scrollTo).
is-mobileReacting to viewport breakpoints with a matchMedia-backed boolean.

Need keyboard or focus behavior instead? See the keys hooks for navigation, focus trap, focus restore, and scope-aware variants.