Hooks

A collection of small, focused React hooks that power the LOKE Design System. They are framework‑agnostic utilities you can use in app code as well.

---

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.