Zentauri UI
Hooks

useHover

Drives preview cards, tooltip delay logic, or analytics hover regions without manual listeners.

Import

import { useHover } from "@zentauri-ui/zentauri-components/lib/useHover";

Demo source

Full client component used for this preview (same JSX as below). Adjust paths if you copy outside this app.

"use client";

import { useHover } from "@zentauri-ui/zentauri-components/lib/useHover";
import { HookDemoPanel } from "@/components/preview/hooks/hook-demo-panel";

export default function HookDemo() {
  const [ref, hovered] = useHover<HTMLDivElement>();
  return (
    <HookDemoPanel title="Interactive demo">
      <div
        ref={ref}
        className={`inline-flex cursor-default rounded-xl border px-8 py-6 text-lg transition-colors ${
          hovered
            ? "border-cyan-400/60 bg-cyan-950/40 text-cyan-100"
            : "border-white/15 bg-slate-900/50 text-slate-300"
        }`}
      >
        {hovered ? "Hovered" : "Hover this surface"}
      </div>
    </HookDemoPanel>
  );
}

Interactive demo

Hover this surface

What it does

useHover ships as a small client module you can import from @zentauri-ui/zentauri-components/lib/useHover. Use it when the behavior matches your integration without copying utility code.

API notes

Read the interactive demo on this page for the parameters used in typical flows. Refer to TypeScript types exported next to the hook for exhaustive options.

Common use cases

  • Reuse the same hook in client components across Next.js App Router routes.
  • Keep server components free of browser APIs; colocate interactive demos in client files.
  • Compose hooks with Zentauri UI primitives for overlays, forms, and data views.
  • Align documentation with published @zentauri-ui/zentauri-components/lib/* paths.

Accessibility

Hooks manipulate behavior, not roles. Pair them with appropriate elements, ARIA attributes, and keyboard handlers so assistive technologies receive a coherent experience.

Next.js integration notes

Keep interactive subtrees in client components. When you only need static copy, leave it in the server layout and pass children into a client boundary that calls the hook.

FAQ

Can I import this hook from a server component?

No. These hooks rely on browser APIs or React client lifecycle. Import them from a file marked with the "use client" directive or from a client child component.

Does the preview site bundle the same code as npm?

The component library app depends on the workspace package. Published builds resolve the same export paths under @zentauri-ui/zentauri-components.

Where should I validate accessibility for hook-driven UI?

Hooks do not replace semantics. Test focus order, labels, and keyboard flows in your real layout with assistive technologies you support.