Hooks

A collection of small, focused React hooks that power the LOKE Design System. These hooks solve common UI challenges: managing component state flexibly, handling keyboard interactions, measuring DOM elements, detecting environments, and managing refs. You can use them independently from the UI primitives to enhance your own components.

Why use these hooks?

• Controlled/uncontrolled patterns: Build components that work in both modes with a single implementation
• Keyboard accessibility: Handle keyboard events safely with proper scoping and cleanup
• DOM awareness: Measure elements, track document visibility, and respond to resize
• Environment detection: Adapt your UI based on mobile, direction (RTL), or hydration state
• Ref composition: Safely combine multiple refs into one without loss of functionality

These hooks are used in @loke/ui primitives and can be used independently in your own custom components.

---

Core state & refs

• useControllableState — Controlled/uncontrolled state pattern with a single API (supports value/defaultValue and onChange).
• usePrevious — Returns the previous value from the prior render.
• useCallbackRef — Creates a stable function whose internal reference always points to the latest handler.
• useId — Hydration‑safe, deterministic IDs for accessibility and labeling (SSR friendly).
• useLayoutEffect — useLayoutEffect that noops on the server to avoid SSR warnings.

DOM & environment

• useIsDocumentHidden — Track whether the document is currently hidden via the Page Visibility API.
• useMobile — Detect mobile environments (typically via media query) to adapt behaviors or layout.
• useDirection — Resolve layout/text direction (ltr / rtl) from document or provider context.

Keyboard & accessibility

• useEscapeKeydown — Run a callback on Escape keydown (with proper event scoping and cleanup).

Layout & measurement

• useSize — Observe and return a DOM element’s size (typically via ResizeObserver).

---

Where to start

• Building a component that can be both controlled and uncontrolled? Start with useControllableState.
• Need a stable event callback that always uses the latest props? Use useCallbackRef.
• Handling Escape to dismiss an overlay? Use useEscapeKeydown.
• Measuring or reacting to element size? Reach for useSize.