{"library":"react-virtual","title":"React Virtual (Legacy)","description":"React Virtual (version 2.10.4) is a JavaScript library providing a single headless hook (`useVirtual`) for efficiently virtualizing scrollable elements in React applications. It enables the rendering of massive lists, grids, and tables by only mounting the visible items in the DOM, drastically improving performance and memory usage for large datasets. This version, last updated over three years ago, was the predecessor to the more actively maintained and feature-rich `@tanstack/react-virtual` (version 3.x.x), part of the broader TanStack ecosystem. While still functional, it is no longer actively developed or recommended for new projects, with development having shifted entirely to the TanStack-branded successor.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-virtual"],"cli":null},"imports":["import { useVirtual } from 'react-virtual'","const { useVirtual } = require('react-virtual')","import type { VirtualItem } from 'react-virtual'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useCallback, CSSProperties } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nconst RowVirtualizerFixed = () => {\n  const parentRef = useRef<HTMLDivElement>(null);\n  const rowCount = 10000;\n\n  const rowVirtualizer = useVirtual({\n    size: rowCount,\n    parentRef,\n    estimateSize: useCallback(() => 35, []), // Fixed item height\n    overscan: 5,\n  });\n\n  return (\n    <div\n      ref={parentRef}\n      style={{\n        height: `300px`,\n        width: `100%`,\n        overflow: `auto`,\n      }}\n    >\n      <div\n        style={{\n          height: `${rowVirtualizer.totalSize}px`,\n          width: `100%`,\n          position: `relative`,\n        }}\n      >\n        {rowVirtualizer.virtualItems.map(virtualRow => (\n          <div\n            key={virtualRow.index}\n            style={{\n              position: `absolute`,\n              top: 0,\n              left: 0,\n              width: `100%`,\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`,\n              background: virtualRow.index % 2 ? '#eee' : '#fafafa',\n              display: 'flex',\n              alignItems: 'center',\n              paddingLeft: '10px',\n              borderBottom: '1px solid #ddd',\n              boxSizing: 'border-box'\n            }}\n          >\n            Row {virtualRow.index}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default RowVirtualizerFixed;","lang":"typescript","description":"This example demonstrates basic row virtualization with fixed item heights, showing how to set up the scroll container and render only the visible rows using the `useVirtual` hook.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}