Hooks

Compare hooks by what they do, then open one for examples and API details.

State

5

useDisclosure

toggle

open close

modal

Manage boolean open/close state with open, close, and toggle handlers plus callbacks that fire only on real transitions.

useDebouncedValue

debounce

search

performance

Derive a debounced copy of a changing value so renders and effects react only once it settles.

usePersistedState

storage

localStorage

persistence

useState that survives reloads: the value is saved under a key in localStorage on the web (AsyncStorage on native when installed, or any storage you pass) and shared by every component using that key.

useDebouncedCallback

debounce

callback

performance

Wrap an imperative function in a stable debounced callback that exposes cancel and flush.

useControllableState

controlled

uncontrolled

forms

Back a value-bearing component with either a controlled value prop or internal state, decided by one call.

Layout & responsive

5

useViewport

responsive

viewport

breakpoints

Read the current viewport { width, height, breakpoint } from one shared, hydration-safe store, re-rendering on every resize. Reach for useBreakpoint instead when only the breakpoint matters.

useBreakpoint

responsive

breakpoints

viewport

Get the current breakpoint name (base, xs, sm, md, lg or xl) from the theme's breakpoint table, re-rendering only when the viewport crosses a breakpoint rather than on every resize.

useElementSize

size

measure

onLayout

Track an element's rendered width and height through onLayout, on web and native, to size children or switch layouts by the space a component actually has rather than the window.

useKeyboardHeight

keyboard

inset

native

The height of the on-screen keyboard currently covering the app, or 0 when it's hidden, for keeping footers, floating buttons and sheets above the keyboard on native and mobile browsers.

useOverlayMode

modal

overlay

responsive

Return consistent booleans for deciding whether a component should render as a fullscreen modal or an anchored overlay/portal across web and native platforms.

Theme

4

useTheme

tokens

colors

design tokens

Read the active PlocksTheme (color ramps, text and background roles, spacing, radii, font sizes) to style your own primitives; outside a provider it returns DEFAULT_THEME. Use useThemeVisuals() when a component reads only colors (colors, text, backgrounds, states, colorScheme, primaryColor), so layout-token changes don't re-render it. Use useThemeLayout() when it reads only layout tokens (spacing, radii, fontSizes, shadows, breakpoints, controlSizes, zIndices, fonts), so color changes don't re-render it.

useThemeMode

dark mode

color scheme

persistence

Read and change the user's color-scheme choice ('light', 'dark' or 'auto') along with the scheme it resolves to, for building a theme switcher. Available below a PlocksProvider given themeModeConfig, which persists the choice (to localStorage on web by default); it throws without one.

useColorScheme

dark mode

color scheme

system

Read the operating system's light/dark preference and re-render when it changes (prefers-color-scheme on web, Appearance on native). It ignores the app's own mode; for the scheme the app is actually rendering, read useTheme().colorScheme.

useThemedStyles

styles

stylesheet

performance

Build a style table from the theme once per theme and dependency list instead of on every render. createThemedStyles is the module-level variant: a style factory cached per theme and argument list, for tables keyed by size, variant and the like.

Styling

2

useStyleProps

style props

spacing

theming

Turn the library's style props (m, p, w, h, bg, opacity, …) into a React Native style resolved against the current theme, so your own components can accept them like the built-in ones do.

useVisibility

visibility

responsive

breakpoints

Decide whether your own component should render from the visibility props every library component accepts: hiddenFrom and visibleFrom (breakpoints) and lightHidden and darkHidden (color scheme).

Keyboard

5

useHotkeys

shortcuts

scoped

Register scoped keyboard shortcuts that only run while the component using them stays mounted.

useGlobalHotkeys

global

shortcuts

Attach application-wide shortcuts that persist even when the originating component unmounts.

useEscapeKey

escape

Listen for user to press the Escape key to dismiss transient UI like modals, drawers, or menus.

useToggleColorScheme

theme

Bind a keyboard shortcut to cycle through available color schemes provided by the theme mode context.

useSpotlightToggle

spotlight

Provide a convenience wrapper for the global command palette shortcut so feature teams can open Spotlight without touching implementation details.

Accessibility

7

useA11yId

id

aria

A stable, SSR-safe element id for ARIA references like aria-controls and aria-labelledby. It returns the id you pass, or a sanitized useId() that is valid as a DOM id, a CSS selector and a native nativeID.

useFieldA11y

form

label

aria

Wire a custom form control to its label, description, error and helper text, using the same contract as every plocks field. On web it links them with ids and aria-* references; on native, where id references don't work, it composes the control's label and hint instead.

useRovingFocus

keyboard

focus

Give a composite widget (toolbar, tab list, radio group, grid) a single tab stop. Arrow keys, Home/End and optional typeahead move focus between its items.

useListNavigation

keyboard

combobox

listbox

Keyboard navigation for a combobox or listbox with virtual focus. Real focus stays in the input while aria-activedescendant follows the highlighted option.

useAdjustable

keyboard

slider

value

Make a custom value control (a slider, knob or meter) adjustable. It gives the control role="slider" with its value range, arrow/Page/Home/End keys on web, and increment/decrement actions for VoiceOver and TalkBack.

useAccessibility

announce

screen reader

provider

Read the whole AccessibilityProvider context at once: announce(), the announcement log, focus tracking, and screen reader and reduced-motion state. It re-renders on every change, so when you only need one of these, use announce or useReducedMotion instead.

useReducedMotion

motion

animation

reduced motion

Whether animations should be reduced: the OS preference (prefers-reduced-motion on web, AccessibilityInfo on native), or the override set by the nearest ReducedMotionProvider. Works without a provider; when it returns true, jump to end states instead of animating.

Localization

2

useDirection

rtl

direction

layout

Read the text direction (dir, isRTL) and switch it with setDirection or toggleDirection, for logic that has to know which way the layout runs. PlocksProvider mounts a DirectionProvider unless given direction={false}; outside one, the hook returns LTR with no-op setters instead of throwing.

useI18n

i18n

translation

locale

Translate keys with t, switch the active locale with setLocale, and format numbers, dates and relative times for that locale. Reads the nearest I18nProvider, which PlocksProvider mounts from its locale and i18nResources props; without one, t returns the key itself and formatting uses English.

Overlays

4

useLayer

layer

dismiss

escape

Register a custom overlay in the app-wide layer stack (no provider needed), so Escape and Android back close only the topmost layer, a press inside a nested layer doesn't close its parent, and focus moves in on open, can be trapped, and returns on close. Wrap its content in <LayerScope id={id}> so layers opened from inside it stack above it, and use useIsTopLayer(id) to know whether it is currently on top.

useFloating

popover

positioning

floating

Anchor a floating element such as a popover, menu or tooltip to a trigger: it places it with flip and shift, renders it through the app's overlay host, registers it in the layer stack for Escape, back, outside press and focus, and returns the ARIA props for both ends. Popover, Menu, Tooltip, HoverCard and Select are built on it.

usePopoverPositioning

positioning

popover

tooltip

The measure-and-place engine under useFloating: attach anchorRef (and popoverRef) and it returns where the popover fits in the viewport — coordinates, the side it landed on after flipping, and the space available. useTooltipPositioning is a preset with tooltip defaults, and useDropdownPositioning adds showOverlay / hideOverlay to render the result through the overlay host; for most uses, reach for useFloating instead.

useOverlayApi

imperative

portal

Open, update and close overlays imperatively in the nearest OverlayProvider (PlocksProvider mounts one along with its renderer): openOverlay(config) returns an id for updateOverlay and closeOverlay, and closeAllOverlays clears them all. useOverlays() returns the configs currently open; both hooks throw outside a provider.

Navigation

3

usePagination

pagination

pager

headless

Headless pagination: the current page, the page numbers to render with ellipses for the gaps, and handlers to move between pages. Build your own pager with it; Pagination is built on it.

useScrollSpy

toc

Collect headings from the DOM or title registry and track which section is currently visible.

useTitleRegistration

toc

titles

Register headings with the shared title registry so sticky TOCs and scrollspy hooks stay in sync. To read the registry (titles, registerTitle, unregisterTitle, clearTitles) directly, call useTitleRegistry(), which throws outside a TitleRegistryProvider, or useTitleRegistryOptional(), which returns null there.

Forms

1

useMaskedInput

masking

Keep controlled inputs in sync with formatted masks while exposing the unmasked value and completion status.

Input

2

useKeyboardManager

keyboard

on screen keyboard

focus

Read the on-screen keyboard's visibility, height and animation timing from KeyboardManagerProvider, dismiss it, or hand focus to an input by id; for layout that only needs the height, useKeyboardHeight is simpler. useKeyboardMetricsOptional and useKeyboardFocusOptional return one half each, so a consumer re-renders only for what it reads, and like useKeyboardManagerOptional they return null instead of throwing without a provider.

useHapticsSettings

haptics

settings

feedback

Read and flip the app-wide haptics switch that useHaptics, and every component built on it such as Button, Toast and Wheel, obeys: enabled, setEnabled(on) and temporarilyDisable(ms). PlocksProvider mounts the HapticsProvider it reads from; useOptionalHapticsSettings returns undefined instead of throwing when there is none.

Gestures

1

useDragGesture

gesture

drag

pan

The drag gesture behind Slider, RangeSlider, Joystick and Rating: spread its handlers, ref and style onto a View to get pointer samples in that View's own coordinates, which keep tracking after the finger leaves it, without the page or a ScrollView stealing the drag. getGestureSurfaceStyle and GESTURE_RESPONDER_LOCK are the two pieces it's built on, for a PanResponder of your own.

Feedback

1

useHaptics

haptics

Trigger platform-native vibration patterns with throttling and graceful fallbacks when haptics are unavailable.

Platform

2

useDeviceInfo

device

responsive

Gather a complete snapshot of runtime details, OS metadata, safe area insets, screen metrics, locale, input capabilities, and helper booleans. All instances share one set of platform listeners, and the hook is hydration-safe: server rendering and the hydration pass see deterministic defaults (meta.ready is false), then the live values arrive. appearance.reducedMotion is the same value useReducedMotion() returns.

useMediaQuery

media query

responsive

dimensions

Evaluate a CSS media query on web and width/height queries on native, updating as the viewport changes.

Utilities

2

useMergedRef

refs

forwardRef

composition

Combine any number of object or callback refs into one stable callback ref, so a component can keep its own ref to a node and still honor the ref its parent forwarded.

useLatestCallback

callbacks

effects

stable identity

Wrap a callback in a function whose identity never changes but always calls the latest version, so effects, timers and subscriptions that call it don't restart when an inline handler changes.

Interaction

1

useHover

hover

pressable

web

Track hover state and spread handlers that satisfy both React Native's hover props and the DOM's mouse events.

Productivity

1

useClipboard

clipboard

copy

Copy values to the system clipboard with optimistic status updates and optional reset timers.

React Native design for iOS, Android, and Web.

Quick Links

Components Charts Hooks Add-ons & extensions

Docs

Getting Started Examples Localization Accessibility

Agents

llms.txt Skills Sitemap

Resources

FAQ Changelog Contributing