{"library":"rc-virtual-list","title":"React Virtual List","description":"rc-virtual-list is a React component designed for efficiently rendering large lists by only rendering items visible within the viewport, significantly improving performance and memory usage compared to rendering all items simultaneously. It supports animations and is compatible with older browsers like IE11+. The package, currently at stable version `3.19.2`, receives regular patch updates, indicating an active maintenance schedule. It is part of the `react-component` ecosystem, known for providing foundational UI components often utilized within Ant Design. Its key differentiators include built-in animation support, broad browser compatibility, and a focus on core virtualization logic without opinionated styling, making it highly adaptable to various design systems. It enables smooth scrolling and interaction even with thousands of data entries by precisely managing what's rendered to the DOM.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-virtual-list"],"cli":null},"imports":["import List from 'rc-virtual-list';","import type { ListProps } from 'rc-virtual-list';","const List = require('rc-virtual-list').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport List from 'rc-virtual-list';\n\ninterface Item {\n  id: number;\n  value: string;\n}\n\nconst VirtualizedListExample: React.FC = () => {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    // Generate some mock data for the virtual list\n    const generateData = (count: number): Item[] =>\n      Array.from({ length: count }).map((_, i) => ({\n        id: i,\n        value: `Virtual Item ${i + 1}`,\n      }));\n    setData(generateData(1000)); // Create a list with 1000 items\n  }, []);\n\n  return (\n    <div style={{ padding: 20, maxWidth: 400, border: '1px solid #ccc' }}>\n      <h3>rc-virtual-list Basic Usage</h3>\n      <p>This example demonstrates a virtualized list rendering 1000 items.</p>\n      <div style={{ height: 300, overflow: 'auto', border: '1px solid #eee' }}>\n        <List\n          data={data}\n          height={300} // The fixed height of the scrollable area\n          itemHeight={30} // The estimated height of a single list item\n          itemKey=\"id\" // Unique key property for each item\n        >\n          {(item: Item) => (\n            <div\n              key={item.id} // Essential for React to correctly manage list elements\n              style={{\n                padding: '8px 16px',\n                borderBottom: '1px solid #f0f0f0',\n                lineHeight: '1.5'\n              }}\n            >\n              {item.value}\n            </div>\n          )}\n        </List>\n      </div>\n    </div>\n  );\n};\n\nexport default VirtualizedListExample;","lang":"typescript","description":"This quickstart renders a virtualized list with 1000 items, demonstrating basic setup and usage of `rc-virtual-list`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}