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.

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

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

useFocusManagement

Hook

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

Open preview

useHover

Hook

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

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

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

useLocalStorage

Hook

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

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

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

useResizeObserver

Hook

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

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

useToggle

Hook

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

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.
  • 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.