What is react-virtuoso?
react-virtuoso is a performant and easy-to-use React component for rendering large lists and tabular data. It provides a virtualized list component that only renders the visible items, significantly improving performance for large datasets.
What are react-virtuoso's main functionalities?
Basic List
This code demonstrates how to create a basic virtualized list with 1000 items using react-virtuoso. Only the visible items are rendered, improving performance.
```jsx
import React from 'react';
import { Virtuoso } from 'react-virtuoso';
const App = () => (
<Virtuoso
totalCount={1000}
itemContent={index => <div>Item {index}</div>}
/>
);
export default App;
```
Grouped List
This code demonstrates how to create a grouped list using react-virtuoso. The list is divided into groups, and each group and its items are rendered only when they are visible.
```jsx
import React from 'react';
import { Virtuoso } from 'react-virtuoso';
const App = () => (
<Virtuoso
groupCounts={[3, 2, 5]}
groupContent={index => <div>Group {index}</div>}
itemContent={(index, groupIndex) => <div>Item {index} in Group {groupIndex}</div>}
/>
);
export default App;
```
Table
This code demonstrates how to create a virtualized table using react-virtuoso. The table renders only the visible rows, which improves performance when dealing with large datasets.
```jsx
import React from 'react';
import { TableVirtuoso } from 'react-virtuoso';
const App = () => (
<TableVirtuoso
data={Array.from({ length: 1000 }, (_, index) => ({ id: index, name: `Item ${index}` }))}
columns={[{ key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }]}
itemContent={(index, item) => (
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
</tr>
)}
/>
);
export default App;
```
Other packages similar to react-virtuoso
react-window
react-window is a lightweight library for rendering large lists and tabular data. It provides similar functionality to react-virtuoso but with a smaller API surface. It is highly performant and easy to use, but may require more manual setup for advanced use cases.
react-virtualized
react-virtualized is a comprehensive library for rendering large lists, tables, and grids. It offers a wide range of features and customization options, making it suitable for complex use cases. However, it has a steeper learning curve compared to react-virtuoso.
react-infinite-scroll-component
react-infinite-scroll-component is a simple library for implementing infinite scrolling in React applications. It is less feature-rich compared to react-virtuoso but is easy to set up and use for basic infinite scrolling needs.
React Virtuoso is a simple, easy to use React virtualized list component that can render huge data sets.
Out of the box, Virtuoso:
- Handles items with variable dynamic height; no manual measurements or hard-coding of item heights necessary;
- Supports grouping with sticky group headers (
GroupedVirtuoso
); - Supports responsive grid layout (
VirtuosoGrid
); - Automatically handles content resizing;
- Can render footer at the end of the list;
- Can pin the first
N
items to the top of the list.
For live examples and documentation, check the website.
Get Started
Install the package in your React project:
npm install react-virtuoso
Or, if yarn is your thing:
yarn add react-virtuoso
Then, put the component somewhere in your tree:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = () => {
return (
<Virtuoso style={{ width: '200px', height: '400px' }} totalCount={200} item={index => <div>Item {index}</div>} />
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Grouping
The GroupedVirtuoso
component is similar to the "flat" Virtuoso
, with the following differences:
- Instead of
totalCount
, the component accepts groupedCounts: number[]
, 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
item
render prop, the component requires an additional group
render prop,
which renders the group header. The group
callback receives the zero-based group index as a parameter; - The
item
render prop gets called with an additional second parameter, groupIndex: number
.
Check the
grouped numbers,
grouped by first letter and
groups with load on demand
examples.
Grid
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.
Check the responsive grid columns example for a sample implementation.
The component accepts an optional
footer
render property,
which is rendered after all items.
The footer can be used to host a "load more" button
or an indicator that the user has reached the end of the list.
Check the footer, press load more and endless scrolling examples for practical applications of the footer.
Pinned Items
The component accepts an optional topItems
property, that specifies
how many of the items to keep "pinned" at the top of the list. Check the top items example.
Documentation and Demos
For in-depth documentation and live examples of the supported features and live demos, check the website.
Author
Petyo Ivanov @petyosi
License
MIT License.