Convert Figma logo to code with AI

petyosi logoreact-virtuoso

The most powerful virtual list component for React

5,216
300
5,216
31
View on GitHubView on NPM

Top Related Projects

bvaughn's avatar

react-window

15,727

React components for efficiently rendering large lists and tabular data

bvaughn's avatar

react-virtualized

26,264

React components for efficiently rendering large lists and tabular data

TanStack's avatar

virtual

5,365

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

TanStack's avatar

virtual

5,365

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

Quick Overview

React Virtuoso is a powerful and flexible virtualized list component for React applications. It efficiently renders large sets of data by only rendering the visible items, making it ideal for handling long lists or grids with smooth scrolling performance.

Pros

  • High performance with minimal configuration required
  • Supports both fixed and variable height items
  • Offers features like grouping, sticky headers, and reverse scrolling
  • Provides TypeScript support for better type safety

Cons

  • Learning curve for advanced customizations
  • Limited documentation for some edge cases
  • May require additional setup for complex use cases
  • Performance can degrade with extremely large datasets (100,000+ items)

Code Examples

  1. Basic usage with a simple list:
import { Virtuoso } from 'react-virtuoso'

const App = () => (
  <Virtuoso
    style={{ height: '400px' }}
    totalCount={10000}
    itemContent={index => <div>Item {index}</div>}
  />
)
  1. Using grouping with sticky headers:
import { GroupedVirtuoso } from 'react-virtuoso'

const App = () => (
  <GroupedVirtuoso
    groupCounts={[10, 20, 30]}
    groupContent={index => <div>Group {index}</div>}
    itemContent={(index, groupIndex) => (
      <div>Item {index} in group {groupIndex}</div>
    )}
  />
)
  1. Implementing infinite scroll:
import { Virtuoso } from 'react-virtuoso'

const App = () => {
  const [items, setItems] = useState([])

  const loadMore = useCallback(() => {
    return new Promise(resolve => {
      setTimeout(() => {
        setItems(prevItems => [...prevItems, ...Array(20).fill(null)])
        resolve()
      }, 500)
    })
  }, [])

  return (
    <Virtuoso
      style={{ height: '400px' }}
      data={items}
      endReached={loadMore}
      itemContent={(index, item) => <div>Item {index}</div>}
    />
  )
}

Getting Started

  1. Install the package:

    npm install react-virtuoso

  2. Import and use in your React component:

    import { Virtuoso } from 'react-virtuoso'

const MyList = () => (
  <Virtuoso
    style={{ height: '400px' }}
    totalCount={1000}
    itemContent={index => <div>Item {index}</div>}
  />
)

  3. Customize as needed, referring to the documentation for advanced features and options.

Competitor Comparisons

bvaughn logo

react-window

15,727

React components for efficiently rendering large lists and tabular data

Pros of react-window

  • Lightweight and performant, with a smaller bundle size
  • Well-established and widely adopted in the React community
  • Offers more granular control over rendering and scrolling behavior

Cons of react-window

  • Less feature-rich compared to react-virtuoso
  • Requires more manual configuration and setup
  • Limited built-in support for dynamic item sizes and variable heights

Code Comparison

react-window:

import { FixedSizeList } from 'react-window';

const Example = () => (
  <FixedSizeList
    height={400}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => <div style={style}>Item {index}</div>}
  </FixedSizeList>
);

react-virtuoso:

import { Virtuoso } from 'react-virtuoso';

const Example = () => (
  <Virtuoso
    style={{ height: '400px', width: '300px' }}
    totalCount={1000}
    itemContent={index => <div>Item {index}</div>}
  />
);

The code comparison shows that react-virtuoso offers a more straightforward API with less configuration required. react-window provides more explicit control over item sizes and dimensions, which can be beneficial for certain use cases but may require more setup.

bvaughn logo

react-virtualized

26,264

React components for efficiently rendering large lists and tabular data

Pros of react-virtualized

  • More mature and widely adopted project with a larger community
  • Offers a wider range of components for various virtualization scenarios
  • Extensive documentation and examples available

Cons of react-virtualized

  • Larger bundle size due to its comprehensive feature set
  • More complex API, which can lead to a steeper learning curve
  • Less frequent updates and maintenance compared to react-virtuoso

Code Comparison

react-virtualized:

import { List } from 'react-virtualized';

<List
  width={300}
  height={300}
  rowCount={1000}
  rowHeight={20}
  rowRenderer={({ index, key, style }) => (
    <div key={key} style={style}>Row {index}</div>
  )}
/>

react-virtuoso:

import { Virtuoso } from 'react-virtuoso';

<Virtuoso
  style={{ height: '300px', width: '300px' }}
  totalCount={1000}
  itemContent={index => <div>Row {index}</div>}
/>

Both libraries provide efficient rendering of large lists, but react-virtuoso offers a simpler API and smaller bundle size. react-virtualized, while more complex, provides additional features and components for advanced use cases. The choice between the two depends on the specific requirements of your project and the level of customization needed.

TanStack logo

virtual

5,365

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

Pros of Virtual

  • Framework-agnostic, supporting React, Vue, and Solid
  • More flexible and customizable for complex virtualization scenarios
  • Better performance for extremely large datasets (millions of items)

Cons of Virtual

  • Steeper learning curve due to its more generic API
  • Less out-of-the-box features compared to React Virtuoso
  • Requires more setup and configuration for basic use cases

Code Comparison

React Virtuoso:

<Virtuoso
  style={{ height: '400px' }}
  totalCount={1000}
  itemContent={index => <div>Item {index}</div>}
/>

TanStack Virtual:

const { getVirtualItems } = useVirtual({
  count: 1000,
  estimateSize: () => 35,
})

return (
  <div style={{ height: '400px', overflow: 'auto' }}>
    {getVirtualItems().map(virtualItem => (
      <div key={virtualItem.index}>Item {virtualItem.index}</div>
    ))}
  </div>
)

Both libraries offer efficient virtualization for large lists, but Virtual provides more control at the cost of simplicity, while React Virtuoso offers a more straightforward API for common use cases in React applications.

TanStack logo

virtual

5,365

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

Pros of Virtual

  • Framework-agnostic, supporting React, Vue, and Solid
  • More flexible and customizable for complex virtualization scenarios
  • Better performance for extremely large datasets (millions of items)

Cons of Virtual

  • Steeper learning curve due to its more generic API
  • Less out-of-the-box features compared to React Virtuoso
  • Requires more setup and configuration for basic use cases

Code Comparison

React Virtuoso:

<Virtuoso
  style={{ height: '400px' }}
  totalCount={1000}
  itemContent={index => <div>Item {index}</div>}
/>

TanStack Virtual:

const { getVirtualItems } = useVirtual({
  count: 1000,
  estimateSize: () => 35,
})

return (
  <div style={{ height: '400px', overflow: 'auto' }}>
    {getVirtualItems().map(virtualItem => (
      <div key={virtualItem.index}>Item {virtualItem.index}</div>
    ))}
  </div>
)

Both libraries offer efficient virtualization for large lists, but Virtual provides more control at the cost of simplicity, while React Virtuoso offers a more straightforward API for common use cases in React applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

npm version

React Virtuoso - the most complete React virtualization rendering list/table/grid family of components.

For live examples and documentation, check the documentation website.

Sponsors

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'))

Message List

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.

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.

Table

The TableVirtuoso component works just like Virtuoso, but with HTML tables. It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.

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 dev - it will launch a Ladle server that lets you browse the components in the examples folder.

License

MIT License.

NPM DownloadsLast 30 Days