React Virtuoso

React Virtuoso is the most powerful React virtual list component, full stop. Here's why:

  • Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
  • Support for reverse (bottom up) scrolling and prepending items (chat, feeds, etc);
  • Grouped mode with sticky headers;
  • Responsive grid layout;
  • Automatic handling of content resize;
  • Custom Header, Footer, and empty list components;
  • Pinned top items;
  • Endless scrolling, press to load more;
  • Initial top most item index;
  • Scroll to index method.

Get Started

npm install react-virtuoso
Sh
import * as React from 'react'
import * as ReactDOM from 'react-dom'
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'))
React JSX

Grouped Mode

The GroupedVirtuoso component is a variant of the "flat" Virtuoso, 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.

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.

Author

Petyo Ivanov

GitHub

https://github.com/petyosi/react-virtuoso