{"library":"react-virtuoso","title":"React Virtuoso","description":"React Virtuoso is a high-performance virtual scroll component library designed for efficiently rendering large lists, grids, and tables in React applications. It achieves this by virtualizing items, meaning only the visible elements are rendered, significantly optimizing performance and memory usage, especially for thousands of items. The current stable version is 4.18.5, and the project maintains an active release cadence with frequent patch and minor updates. Key differentiators include automatic handling of variable and dynamic item sizes without requiring manual measurement, responsive container sizing that adapts seamlessly to parent and viewport changes (including complex flexbox layouts), and robust support for bi-directional endless scrolling through `startReached` and `endReached` callbacks. The library also offers specialized components like `GroupedVirtuoso` for lists with sticky headers, `VirtuosoGrid` for responsive grid layouts, and `TableVirtuoso` for virtualized tables, providing extensive customization options and integration capabilities with popular UI libraries like shadcn/ui, MUI, and Mantine.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-virtuoso"],"cli":null},"imports":["import { Virtuoso } from 'react-virtuoso';","import { GroupedVirtuoso } from 'react-virtuoso';","import { TableVirtuoso } from 'react-virtuoso';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Virtuoso } from 'react-virtuoso';\nimport React from 'react';\n\nconst generateItems = (count: number) =>\n  Array.from({ length: count }, (_, i) => ({\n    id: i,\n    text: `Item ${i + 1}`,\n    height: Math.random() * 50 + 50 // Simulate variable heights\n  }));\n\nexport default function MyVirtualizedList() {\n  const items = React.useMemo(() => generateItems(5000), []);\n\n  return (\n    <div style={{ height: '400px', border: '1px solid #ccc', margin: '20px' }}>\n      <h2 style={{ padding: '10px', margin: 0, background: '#f0f0f0' }}>Large Virtual List Example</h2>\n      <Virtuoso\n        style={{ height: 'calc(100% - 60px)' }} // Adjust for title height\n        totalCount={items.length}\n        itemContent={(index) => (\n          <div\n            style={{\n              padding: '15px 10px',\n              borderBottom: '1px solid #eee',\n              background: index % 2 === 0 ? '#fafafa' : 'white',\n              height: items[index].height // Use pre-calculated variable height\n            }}\n          >\n            <strong>{items[index].text}</strong>: This is content for item {index}.\n            It demonstrates variable height functionality.\n          </div>\n        )}\n        // Optional: Implement infinite scroll\n        // endReached={() => {\n        //   console.log('End of list reached, fetching more data...');\n        //   // In a real app, you would fetch more items here\n        // }}\n        // overscan={200} // Render 200px before/after viewport for smoother scroll\n      />\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates a basic `Virtuoso` component rendering a list of 5000 items with simulated variable heights within a fixed-height container, showcasing its core virtualization capabilities.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}