⭐️ Leave a star →

Hooks

Wire UI ships a set of small, focused React hooks. They are the same building blocks the components are made from — exported so you can compose your own headless UI with identical behaviour, accessibility, and data-* conventions.

State

Hook	Purpose
`useControllableState`	Unified controlled / uncontrolled state.
`useDisclosure`	Boolean open / close with stable handlers.
`useId`	SSR-safe unique id with optional prefix.
`usePrevious`	The value from the previous render.
`useStateMachine`	Typed finite state machine with `state` / `send` / `can`.
`useUndoRedo`	Bounded history with `undo` / `redo` / `canUndo` / `canRedo`.

Interaction

Hook	Purpose
`useClickOutside`	Fire a callback on outside click / tap.
`useFocusTrap`	Trap keyboard focus inside a container.
`useFocusVisible`	Track keyboard-vs-pointer focus.
`useInteractiveState`	Hover, focus-visible, press state with `data-*` attributes.
`useKeyboard`	Map keyboard events to handlers with modifier support.
`useHotkeys`	Declarative shortcut binder with `mod+k`, scopes, input-suppression.
`useLongPress`	Long-press gesture handler with move-cancel and threshold.
`useCopyToClipboard`	Async clipboard write with `copied` flag and auto-reset.

Layout

Hook	Purpose
`useFloating`	Position a floating element relative to a reference.
`useScrollLock`	Lock document scrolling without layout shift.

Observers

Hook	Purpose
`useIntersectionObserver`	Observe element visibility within a scroll container.
`useResizeObserver`	Observe an element’s content-box size.
`useMutationObserver`	Observe DOM mutations on a ref target.
`useElementSize`	Live `{ width, height }` of a referenced element.
`useWindowSize`	Live `{ width, height }` of the viewport.

Timing

Hook	Purpose
`useTimeout`	`setTimeout` with `start` / `stop` / `reset` and `isPending`.
`useInterval`	`setInterval` with pause / resume; `delay = null` pauses.

Storage

Hook	Purpose
`useLocalStorage` / `useSessionStorage`	SSR-safe `useState`-shaped hook backed by Web Storage with cross-tab sync.

DOM

Hook	Purpose
`useEventListener`	Typed `addEventListener` for window / document / element / ref.
`useDocumentVisibility`	Reactive `document.visibilityState`.
`useOnlineStatus`	Reactive `navigator.onLine` boolean.

React-only

useIsomorphicLayoutEffect — useLayoutEffect on the client, useEffect on the server.

Utilities

Hook	Purpose
`useDebounce`	Debounce a value or callback.
`useThrottle`	Throttle a value or callback.
`useMediaQuery`	Reactively match a CSS media query.
`useReduceMotion`	Detect the OS-level reduced-motion preference.

Refs

useMergedRefs — merge multiple refs onto a single element.

Last updated on June 16, 2026

Typewriter useControllableState

MIT License © 2026 wire-ui

Hooks / Composables / Primitives – Wire UI