react-virtuoso

What is react-virtuoso?

react-virtuoso is a performant and easy-to-use React component for rendering large lists and tabular data. It provides a virtualized list component that only renders the visible items, significantly improving performance for large datasets.

What are react-virtuoso's main functionalities?

Basic List

This code demonstrates how to create a basic virtualized list with 1000 items using react-virtuoso. Only the visible items are rendered, improving performance.

```jsx
import React from 'react';
import { Virtuoso } from 'react-virtuoso';

const App = () => (
  <Virtuoso
    totalCount={1000}
    itemContent={index => <div>Item {index}</div>}
  />
);

export default App;
```

Grouped List

This code demonstrates how to create a grouped list using react-virtuoso. The list is divided into groups, and each group and its items are rendered only when they are visible.

```jsx
import React from 'react';
import { Virtuoso } from 'react-virtuoso';

const App = () => (
  <Virtuoso
    groupCounts={[3, 2, 5]}
    groupContent={index => <div>Group {index}</div>}
    itemContent={(index, groupIndex) => <div>Item {index} in Group {groupIndex}</div>}
  />
);

export default App;
```

Table

This code demonstrates how to create a virtualized table using react-virtuoso. The table renders only the visible rows, which improves performance when dealing with large datasets.

```jsx
import React from 'react';
import { TableVirtuoso } from 'react-virtuoso';

const App = () => (
  <TableVirtuoso
    data={Array.from({ length: 1000 }, (_, index) => ({ id: index, name: `Item ${index}` }))}
    columns={[{ key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }]}
    itemContent={(index, item) => (
      <tr>
        <td>{item.id}</td>
        <td>{item.name}</td>
      </tr>
    )}
  />
);

export default App;
```

Other packages similar to react-virtuoso

react-window

react-window is a lightweight library for rendering large lists and tabular data. It provides similar functionality to react-virtuoso but with a smaller API surface. It is highly performant and easy to use, but may require more manual setup for advanced use cases.

react-virtualized

react-virtualized is a comprehensive library for rendering large lists, tables, and grids. It offers a wide range of features and customization options, making it suitable for complex use cases. However, it has a steeper learning curve compared to react-virtuoso.

react-infinite-scroll-component

react-infinite-scroll-component is a simple library for implementing infinite scrolling in React applications. It is less feature-rich compared to react-virtuoso but is easy to set up and use for basic infinite scrolling needs.

README

TSDX Bootstrap

This project was bootstrapped with TSDX.

Local Development

Below is a list of commands you will probably find useful.

npm start or yarn start

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

npm run build or yarn build

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

npm test or yarn test

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.