Virtual List

import { VirtualList } from "@/components/ui/virtual-list";

export default function Example() {
  return <VirtualList />;
}

"use client";

import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
import { cn } from "@/lib/utils";

const VirtualList = forwardRef(({ className, items = [], itemHeight = 40, overscan = 5, renderItem, height = 400, ...props }, ref) => {
  const containerRef = useRef(null);
  const [scrollTop, setScrollTop] = useState(0);

  const totalHeight = items.length * itemHeight;
  const visibleCount = Math.ceil(height / itemHeight);
  const startIdx = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
  const endIdx = Math.min(items.length, startIdx + visibleCount + overscan * 2);
  const visibleItems = items.slice(startIdx, endIdx);

  const onScroll = useCallback((e) => setScrollTop(e.currentTarget.scrollTop), []);

  return (
    <div ref={(el) => { containerRef.current = el; if (typeof ref === "function") ref(el); else if (ref) ref.current = el; }}
      className={cn("overflow-auto rounded-md border", className)}
      style={{ height }}
      onScroll={onScroll}
      {...props}
    >
      <div style={{ height: totalHeight, position: "relative" }}>
        {visibleItems.map((item, i) => (
          <div key={startIdx + i}
            style={{ position: "absolute", top: (startIdx + i) * itemHeight, height: itemHeight, left: 0, right: 0 }}
          >
            {renderItem ? renderItem(item, startIdx + i) : <div className="flex items-center px-3 text-sm">{String(item)}</div>}
          </div>
        ))}
      </div>
    </div>
  );
});
VirtualList.displayName = "VirtualList";

export { VirtualList };