Hooks

useVirtualList

Logs, tables, and feeds with tens of thousands of rows that must stay smooth without a heavyweight dependency.

Import

import { useVirtualList } from "@zentauri-ui/zentauri-components/hooks/useVirtualList";

Demo source

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

"use client";

import { useVirtualList } from "@zentauri-ui/zentauri-components/hooks/useVirtualList";
import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
import { HookDemoPanel } from "@/components/preview/hooks/demo-panel";

export default function HookDemo() {
  const itemCount = 10000;
  const { setContainerRef, virtualItems, totalHeight, scrollToIndex } =
    useVirtualList({ itemCount, itemHeight: 36 });
  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        {itemCount.toLocaleString()} rows, but only{" "}
        <span className="font-mono text-cyan-200">{virtualItems.length}</span> are in the DOM.
      </p>
      <div className="mb-4 flex flex-wrap gap-2">
        <Button type="button" size="sm" onClick={() => scrollToIndex(0)}>
          Top
        </Button>
        <Button type="button" size="sm" appearance="outline" onClick={() => scrollToIndex(5000)}>
          Row 5,000
        </Button>
        <Button type="button" size="sm" appearance="outline" onClick={() => scrollToIndex(itemCount - 1)}>
          Bottom
        </Button>
      </div>
      <div
        ref={setContainerRef}
        className="h-60 overflow-y-auto rounded-lg border border-white/10 bg-slate-900/40"
      >
        <div className="relative" style={{ height: totalHeight }}>
          {virtualItems.map((item) => (
            <div
              key={item.index}
              className="absolute inset-x-0 flex items-center border-b border-white/5 px-4 text-sm text-slate-300"
              style={{ height: item.size, transform: `translateY(${item.start}px)` }}
            >
              Row {item.index + 1}
            </div>
          ))}
        </div>
      </div>
    </HookDemoPanel>
  );
}

Interactive demo

10,000 rows, but only 3 are in the DOM.

Row 1

Row 2

Row 3

What it does

useVirtualList ships as a small client module you can import from @zentauri-ui/zentauri-components/hooks/useVirtualList. 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/hooks/* 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.