A React hook that virtualizes long lists by only rendering visible rows, supporting fixed, capped, or computed row-height strategies with incremental height caching and scroll-position correction.
"use client";
import useVirtualizedList from "@/components/ui/virtualize";
const ITEM_COUNT = 1000;
const ROW_HEIGHT = 56;
const demoItems = Array.from({ length: ITEM_COUNT }, (_, i) => ({
id: i,
strategy: { kind: "fixed" as const, height: ROW_HEIGHT },
data: { index: i },
}));
export default function VirtualizeDemo() {
const {
items: visible,
topSpacer,
bottomSpacer,
scrollRef,
} = useVirtualizedList(demoItems, 384, 480);
return (
<div
ref={scrollRef}
className="w-full max-w-md h-96 overflow-y-auto rounded-lg border border-border bg-background"
>
<div style={{ height: topSpacer }} />
{visible.map((item) => (
<div
key={item.id}
className="flex items-center gap-3 border-b border-border px-4 py-3 text-sm"
style={{ height: ROW_HEIGHT }}
>
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
{item.data.index + 1}
</div>
<span className="font-medium text-foreground">
Item #{item.data.index + 1}
</span>
</div>
))}
<div style={{ height: bottomSpacer }} />
</div>
);
}