Virtualized List

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Virtualized List to your project and fits it to your theme.

Code

How Virtualized List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}