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

Usage no npm install needed!

<script type="module">
  import reactVirtuoso from '';


npm version

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

For live examples and documentation, check the documentation website.



React Virtuoso is proudly sponsored by Stream, the leading provider in enterprise grade Feed & Chat APIs. To learn more about Stream, click here.

If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.

Get Started

npm install react-virtuoso
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'))

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.


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.

Works With Your UI Library of Choice

You can customize the markup up to your requirements - check the Material UI list demo. If you need to support reordering, check the React Sortable HOC example.

Documentation and Demos

For in-depth documentation and live examples of the supported features and live demos, check the documentation website.

Browser support

To support legacy browsers, you might have to load a ResizeObserver Polyfill before using react-virtuoso:

import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
  window.ResizeObserver = ResizeObserver


Petyo Ivanov @petyosi.


Fixes and new Features

To run the tests, use npm run test. An end-to-end browser-based test suite is runnable with npm run e2e, with the pages being e2e/*.tsx and the tests e2e/*.test.ts.

A convenient way to debug something is to preview the test cases in the browser. To do that, run npm run browse-examples - it will open a crude UI that lets you browse the components in the e2e folder.


The documentation site is built with docusaurus and the content is available in the site/docs directory. The API reference is generated from the doc comments in src/components.tsx.


MIT License.