rv

react-virtuoso

The most powerful virtual list component for React

Showing:

Popularity

Downloads/wk

81.7K

GitHub Stars

1.9K

Maintenance

Last Commit

2d ago

Contributors

22

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

5.0/54
Read All Reviews
mgs95
Emad-salah

Top Feedback

3Great Documentation
3Performant
2Easy to Use
1Responsive Maintainers

Readme

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.

Sponsors

Stream

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.

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.

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

Author

Petyo Ivanov @petyosi.

Contributing

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.

Docs

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.

License

MIT License.

Rate & Review

Great Documentation3
Easy to Use2
Performant3
Highly Customizable0
Bleeding Edge0
Responsive Maintainers1
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Mariano Gonzalez SalazarMadrid, Spain80 Ratings95 Reviews
10 months ago
Easy to Use
Performant
Responsive Maintainers

There are plenty of solutions when working with virtualized tables. What differentiates this library from the other is that this one works better when handling rare cases. For instance, if you need features such as, variable row sizes that change on user interaction, auto-scroll, the addition of new elements from top… this is your library. The maintainer is responsible (within 3 days).


0
Emad Kheir121 Ratings132 Reviews
Full-stack Software Engineer
1 month ago
Great Documentation

I just found out about this library through OpenBase! :D I've tried it out now on a small project and it's much better than react-virtualized and it's way easier to set up especially when you frequently use CSS flexbox throughout your app which react-virtualized tends to have bugs with


0
Vlad PavlovskiCzech Republic, Prague1 Rating0 Reviews
1 month ago
Great Documentation
Easy to Use
Performant
Bernard DociPristina, Kosovo4 Ratings0 Reviews
Web developer and computer enthusiast. I write a lot of JavaScript and my best tools are Vuejs, React.js and Node.js.
3 months ago
Great Documentation
Abhishek Kumar GuptaIndia1 Rating0 Reviews
Software Engineer
4 months ago

Tutorials

No tutorials found
Add a tutorial