Hooks
Shared React hooks for accessibility, data, environment, interaction, layout and state.
48 pages · 0 live examples, generated from the design system metadata.
A11y
useArrowKeyNavArrow-key navigation with a roving tabindex for toolbars, lists and grids.useFocusTrapKeep Tab focus inside a custom overlay and restore it on close.useLiveAnnouncerPolite or assertive screen reader announcements for changes away from focus.usePrefersReducedMotionWhether the reader asked to reduce motion.
Data
useLocalStorageuseState persisted to localStorage, synced across components and tabs.useMapMap state with immutable set, replace, remove, clear and reset actions.useReadLocalStorageRead-only localStorage subscriptions shared with useLocalStorage.useSelectionMulti-select state in a Set, with select-all and indeterminate support.useSessionStorageuseState persisted to sessionStorage for one tab.
Environment
useDocumentTitleSet a document title and restore the previous owner on cleanup.useIsClientFalse on the server and during hydration, true on the client.useIsMobileTrue below the 768px phone breakpoint.useIsMountedA stable getter for whether this hook is currently mounted.useMediaQueryTrack a CSS media query, SSR-safe.useOnlineStatusWhether the browser reports a network connection.usePageVisibilityWhether the tab is visible, to pause work in the background.usePrefersColorSchemeThe operating system colour scheme: 'light' or 'dark'.useScreenRead a reactive snapshot of the browser screen properties.useScriptLoad an explicitly configured script with shared status and ownership.useWindowSizeTrack layout viewport width and height in CSS pixels.
Interaction
useCopyToClipboardCopy text with a temporary copied state and a fallback.useEventListenerDeclarative DOM event listener with cleanup.useHotkeyKeyboard shortcuts with platform-aware mod keys.useHoverPointer hover state with props to spread, ignoring touch.useMousePositionTrack viewport, page and optional element-relative pointer coordinates.useOnClickOutsideRun a callback when a press lands outside one or more elements.useScrollLockLock page scrolling while a custom overlay is open.
Layout
useCollapsibleSectionsExpanded state for several sections, with expand all and collapse all.useElementSizeAn element's size, kept current with a ResizeObserver.useInViewWhether an element is in the viewport, from an IntersectionObserver.useScrollPositionThe vertical scroll offset of the page or a scroll container.
State
useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.useDisclosureOpen, close and toggle state for overlays and disclosures.useEventCallbackA stable function that always calls the latest callback.useIntervalsetInterval that can pause and always runs the latest callback.useIsomorphicLayoutEffectuseLayoutEffect in the browser, useEffect on the server.useMergedRefsCombine a forwarded ref with your own refs.usePreviousThe value a prop or state held before it last changed.useSliderInputKeep a range slider and its number inputs in sync.useStepZero-based step state for wizards and multi-page forms.useThrottleCallbackA function that runs at most once per interval.useTimeoutA one-off timer with reset and clear.useUnmountRun the latest committed callback when an effect is cleaned up.