rc-virtual-list

import React, { useState, useEffect } from 'react'; import List from 'rc-virtual-list'; interface Item { id: number; value: string; } const VirtualizedListExample: React.FC = () => { const [data, setData] = useState<Item[]>([]); useEffect(() => { // Generate some mock data for the virtual list const generateData = (count: number): Item[] => Array.from({ length: count }).map((_, i) => ({ id: i, value: `Virtual Item ${i + 1}`, })); setData(generateData(1000)); // Create a list with 1000 items }, []); return ( <div style={{ padding: 20, maxWidth: 400, border: '1px solid #ccc' }}> <h3>rc-virtual-list Basic Usage</h3> <p>This example demonstrates a virtualized list rendering 1000 items.</p> <div style={{ height: 300, overflow: 'auto', border: '1px solid #eee' }}> <List data={data} height={300} // The fixed height of the scrollable area itemHeight={30} // The estimated height of a single list item itemKey="id" // Unique key property for each item > {(item: Item) => ( <div key={item.id} // Essential for React to correctly manage list elements style={{ padding: '8px 16px', borderBottom: '1px solid #f0f0f0', lineHeight: '1.5' }} > {item.value} </div> )} </List> </div> </div> ); }; export default VirtualizedListExample;