cardoso / react-virtuoso

The most powerful virtual list component for React

Home Page:https://virtuoso.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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 one the e2e test cases in the browser. To do that, run npm run preview e2e/hello.tsx. There are several other examples in the e2e directory.

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.

ezoic increase your site revenue

About

The most powerful virtual list component for React

https://virtuoso.dev

License:MIT License


Languages

Language:TypeScript 93.0%Language:JavaScript 5.2%Language:CSS 1.5%Language:HTML 0.2%