Hooks

Hooks gallery

Each hook ships from @zentauri-ui/zentauri-components/lib/* with TypeScript types. Open a card to see live behavior, then copy the import path into your own client components.

Hooks (51)

useDebouncedCallback

Hook

Schedules trailing-edge actions with stable functions, cancel/flush controls and reactive pending state.

Open preview→

useNumberFormat

Hook

Formats numbers and bigint values with native Intl, explicit locale defaults and a bounded formatter cache.

Open preview→

useTextOverflow

Hook

Measures text overflow after mount, including collapsed constraints, resize and font changes.

Open preview→

useBodyScrollLock

Hook

Sets document body overflow hidden while active, restoring the previous style on cleanup.

Open preview→

useClickOutside

Hook

Listens for pointer or touch events outside a ref element and closes floating UI.

Open preview→

useClipboard

Hook

Async copy to the system clipboard with copied and error state plus optional auto-reset.

Open preview→

useControllableState

Hook

Single state tuple that follows either controlled value props or internal default state.

Open preview→

useCookie

Hook

Reads and writes a single cookie with React state kept in sync, including remove with max-age expiry.

Open preview→

useCountdown

Hook

Countdown timer from countStart to countStop with start, pause, resume, reset, and onComplete.

Open preview→

useDateTimeFormat

Hook

Memoized Intl.DateTimeFormat with a formatter cache; format, formatRange, and formatToParts.

Open preview→

useDebouncedValue

Hook

Returns a value that updates only after the source has been stable for a delay.

Open preview→

useDisclosure

Hook

Boolean open state with open, close, toggle, and setOpen helpers built on controllable state.

Open preview→

useDocumentTitle

Hook

Syncs document.title from React and optionally restores the prior title on unmount.

Open preview→

useDurationFormat

Hook

Humanize milliseconds into localized duration strings via Intl.NumberFormat unit style.

Open preview→

useDynamicStepper

Hook

Clamped step index with goPrevious, goNext, and controlled or uncontrolled state for multi-step flows.

Open preview→

useEventListener

Hook

Attaches any DOM event listener to window, document, an element, or a ref with automatic cleanup.

Open preview→

useFocusManagement

Hook

Escape to close, initial focus into a container, and focus containment while open.

Open preview→

useFullscreen

Hook

Cross-browser Fullscreen API wrapper with WebKit prefixes, event-driven state, and promise-based enter, exit, and toggle.

Open preview→

useGeolocation

Hook

Browser geolocation with loading, error, Permissions API state, and one-shot or watch modes.

Open preview→

useHotkeys

Hook

Binds keyboard shortcut combos like mod+k or ctrl+shift+p to handlers, skipping inputs by default.

Open preview→

useHash

Hook

Computes SHA-1/SHA-224/SHA-256/SHA-384/SHA-512 hashes via the Web Crypto API, returning hash/isHashing/error/recompute.

Open preview→

useHover

Hook

Pointer enter and leave tracking on the element attached via a ref callback.

Open preview→

useIdleTimeout

Hook

Flags the user idle after a period without pointer, key, wheel, touch, or scroll activity.

Open preview→

useInView

Hook

Boolean intersection flag from a ref callback and shared IntersectionObserver options.

Open preview→

useIntersectionObserver

Hook

Low-level ref callback plus the latest IntersectionObserverEntry for custom logic.

Open preview→

useInterval

Hook

Declarative setInterval that always calls the latest callback and pauses when the delay is null.

Open preview→

useIsomorphicLayoutEffect

Hook

Resolves to useLayoutEffect in the browser and useEffect on the server to avoid warnings.

Open preview→

useIsMounted

Hook

Returns a stable function that reports whether the component is still mounted.

Open preview→

useKeyPress

Hook

Boolean for whether a key (or any of several keys) is held down, cleared on window blur.

Open preview→

useLocalStorage

Hook

JSON-serialized state mirrored to localStorage with cross-tab storage events.

Open preview→

useLongPress

Hook

Long-press gesture via pointer events with threshold, movement tolerance, and lifecycle callbacks.

Open preview→

useMediaQuery

Hook

Subscribes to window.matchMedia and updates when the query result changes.

Open preview→

useNetworkStatus

Hook

Boolean online flag wired to window online and offline events.

Open preview→

usePageVisibility

Hook

Tracks document.visibilityState for background tabs and mobile app switches.

Open preview→

usePagination

Hook

Page index, item model, and navigation helpers including buildPaginationItems.

Open preview→

useTableSort

Hook

Controlled or uncontrolled sort state for table headers, including sortable TableHead props.

Open preview→

useTableFilter

Hook

Column filter state plus filtered row derivation for client-side table and list data.

Open preview→

usePrefersColorScheme

Hook

Resolves prefers-color-scheme to a light or dark string with SSR-friendly defaults.

Open preview→

usePrefersReducedMotion

Hook

Boolean for prefers-reduced-motion: reduce via the shared media query hook.

Open preview→

usePrevious

Hook

Returns the value from the previous render — undefined on the first one.

Open preview→

useRelativeTime

Hook

Live-updating relative time with automatic unit selection and adaptive tick scheduling via Intl.RelativeTimeFormat.

Open preview→

useResizeObserver

Hook

Observes element content box size via ResizeObserver and a ref callback.

Open preview→

useScrollPosition

Hook

Tracks the scroll x/y offset of the window or a scrollable element via a passive listener.

Open preview→

useSessionStorage

Hook

JSON-serialized state mirrored to sessionStorage for the active tab session.

Open preview→

useThrottledCallback

Hook

Wraps a callback so it runs at most once per interval based on wall-clock time.

Open preview→

useTimeout

Hook

Declarative setTimeout with automatic cleanup plus imperative clear and reset controls.

Open preview→

useTimezone

Hook

Detect the user's zone, enumerate all IANA zones via Intl.supportedValuesOf, and get wall-clock time + GMT offset in any zone.

Open preview→

useToggle

Hook

Boolean state with toggle and explicit set helpers for simple on-off UI.

Open preview→

useUndoRedo

Hook

Undo/redo state history with bounded depth, transaction grouping, replace-without-commit, and jump-to-index.

Open preview→

useVirtualList

Hook

Headless fixed-height list virtualization: renders only visible rows plus overscan with scrollToIndex.

Open preview→

useWindowSize

Hook

Tracks innerWidth and innerHeight with a resize listener on the window.

Open preview→

What it does

This gallery documents the hooks exported from packages/components/src/lib. Each route demonstrates one hook with minimal UI so you can verify behavior before wiring it into production screens.

How previews work

Demos run entirely in the browser inside client components. Source hooks are imported from published-style paths so copy-pasted imports match what your app should use after install.

Common use cases

  • Persist UI state with useLocalStorage or useSessionStorage.
  • Drive tables and lists with usePagination or buildPaginationItems.
  • Step through wizards with useDynamicStepper or the DynamicStepper UI.
  • Respond to viewport and motion preferences with useMediaQuery and usePrefersReducedMotion.
  • Manage overlays with useBodyScrollLock, useClickOutside, and useFocusManagement.
  • Observe layout and visibility with useResizeObserver, useInView, and useIntersectionObserver.

Accessibility

Previews favor clear focus rings and native controls, but your integration must still meet WCAG expectations for real user journeys.

Test with keyboard-only navigation whenever hooks change focus or trap it.

Next.js integration notes

Set NEXT_PUBLIC_SITE_URL for accurate canonical and Open Graph URLs. Keep heavy interactive demos out of the critical path for LCP on marketing pages.

FAQ

Are these hooks safe to use in Next.js App Router?

Yes when imported from client components or client modules. Do not call them from server components because they rely on browser APIs or client-only React lifecycle.

How do imports map to npm?

Use subpaths such as @zentauri-ui/zentauri-components/lib/useToggle. The preview app resolves the same exports via the workspace package.

Do hooks replace accessible markup?

No. Hooks implement behavior; you still supply semantic HTML, labels, and keyboard support appropriate to your product.