react-virtual

What is react-virtual?

The react-virtual package is a lightweight and performant library for rendering large lists and tabular data in React applications. It helps in efficiently managing and displaying large datasets by only rendering the visible items, thus improving performance and reducing memory usage.

What are react-virtual's main functionalities?

Virtualized List

This feature allows you to create a virtualized list where only the visible items are rendered. This improves performance when dealing with large datasets.

import { useVirtual } from 'react-virtual';

function VirtualizedList({ items }) {
  const parentRef = React.useRef();
  const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: React.useCallback(() => 35, []),
  });

  return (
    <div ref={parentRef} style={{ height: `400px`, overflow: 'auto' }}>
      <div style={{ height: `${rowVirtualizer.totalSize}px`, width: '100%' }}>
        {rowVirtualizer.virtualItems.map(virtualRow => (
          <div
            key={virtualRow.index}
            ref={virtualRow.measureRef}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualRow.start}px)`
            }}
          >
            {items[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Virtualized Grid

This feature allows you to create a virtualized grid where only the visible cells are rendered. This is useful for rendering large tables or grids efficiently.

import { useVirtual } from 'react-virtual';

function VirtualizedGrid({ columns, rows }) {
  const parentRef = React.useRef();
  const columnVirtualizer = useVirtual({
    size: columns.length,
    parentRef,
    estimateSize: React.useCallback(() => 100, []),
    horizontal: true,
  });
  const rowVirtualizer = useVirtual({
    size: rows.length,
    parentRef,
    estimateSize: React.useCallback(() => 35, []),
  });

  return (
    <div ref={parentRef} style={{ height: `400px`, width: `600px`, overflow: 'auto' }}>
      <div
        style={{
          height: `${rowVirtualizer.totalSize}px`,
          width: `${columnVirtualizer.totalSize}px`,
          position: 'relative',
        }}
      >
        {rowVirtualizer.virtualItems.map(virtualRow => (
          <div
            key={virtualRow.index}
            ref={virtualRow.measureRef}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualRow.start}px)`
            }}
          >
            {columnVirtualizer.virtualItems.map(virtualColumn => (
              <div
                key={virtualColumn.index}
                ref={virtualColumn.measureRef}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  height: '100%',
                  transform: `translateX(${virtualColumn.start}px)`
                }}
              >
                {rows[virtualRow.index][virtualColumn.index]}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

Other packages similar to react-virtual

react-window

react-window is a library for rendering large lists and tabular data efficiently. It is similar to react-virtual in that it only renders the visible items, but it is more lightweight and has a simpler API. However, react-virtual offers more flexibility and customization options.

react-virtualized

react-virtualized is another popular library for rendering large lists and tabular data. It offers a wide range of features and components, including grids, lists, tables, and more. Compared to react-virtual, react-virtualized is more feature-rich but also more complex and heavier.

README

Table of Contents generated with DocToc

• Visit react-virtual.tanstack.com for docs, guides, API and more!
• Quick Features

Hooks for virtualizing scrollable elements in React

Enjoy this library? Try the entire TanStack! React Query, React Table, React Charts, React Form

Visit react-virtual.tanstack.com for docs, guides, API and more!

Quick Features

• Row, Column, and Grid virtualization
• One single headless hook
• Fixed, variable and dynamic measurement modes
• Imperative scrollTo control for offset, indices and alignment
• Custom scrolling function support (eg. smooth scroll)
•