react-virtuoso
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.8 • Public • Published

    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.

    Install

    npm i react-virtuoso

    DownloadsWeekly Downloads

    88,590

    Version

    2.2.8

    License

    MIT

    Unpacked Size

    1.36 MB

    Total Files

    48

    Last publish

    Collaborators

    • petyosi