React Virtuoso
The most complete React virtualization rendering family of components.
Get Started
npm install react-virtuoso
import { Virtuoso } from 'react-virtuoso'
const App = () => {
return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={(index) => <div>Item {index}</div>} />
}
ReactDOM.render(<App />, document.getElementById('root'))
Documentation
For in-depth documentation and live examples of all supported features, check the documentation website.
Components
The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes an imperative data management API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation.
The GroupedVirtuoso component is a variant of the flat Virtuoso component, with the following differences:
- Instead of
totalCount, the component exposes groupCounts: number[] property, which specifies the amount of items in each group.
For example, passing [20, 30] will render two groups with 20 and 30 items each;
- In addition the
itemContent property, the component requires an additional groupContent property,
which renders the group header. The groupContent callback receives the zero-based group index as a parameter.
The VirtuosoGrid component displays same sized items in multiple columns.
The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
The Masonry component renders columns from varying-height items, suitable for product listings, image galleries, etc.
The TableVirtuoso component works just like Virtuoso, but with HTML tables.
It supports window scrolling, sticky headers, sticky columns, and works with Tanstack Table and MUI Table.
Works With Your UI Library
You can customize the markup up to your requirements - check the Material UI list demo.
Contributing
Contributions are welcome! Please see CONTRIBUTING.md for development setup, testing guidelines, and pull request process.
Sponsors
If you find Virtuoso valuable for your work, please consider sponsoring the project. Your support helps ensure continued development and maintenance.
Author
Petyo Ivanov @petyosi.
License
MIT License.
