React Hooks For Virtual Scrolling - React-virtual

Description:

React hooks for enabling virtual scrolling, smooth scrolling, and infinite scrolling on your app.

Supports Row, Column, and Grid virtualization.

Installation:

# Yarn
$ yarn add react-virtual
# NPM
$ npm install react-virtual --save

Basic usage:

1. Import the React-virtual.

import React from "react";
import ReactDOM from "react-dom";
import { useVirtual } from "react-virtual";

2. Enable the virtual scrolling on rows.

function RowVirtualizerFixed() {
  const parentRef = React.useRef();
  const rowVirtualizer = useVirtual({
    size: 10000,
    parentRef,
    estimateSize: React.useCallback(() => 35, []),
    overscan: 5
  });
  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          height: `200px`,
          width: `400px`,
          overflow: "auto"
        }}
      >
        <div
          style={{
            height: `${rowVirtualizer.totalSize}px`,
            width: "100%",
            position: "relative"
          }}
        >
          {rowVirtualizer.virtualItems.map(virtualRow => (
            <div
              key={virtualRow.index}
              className={virtualRow.index % 2 ? "ListItemOdd" : "ListItemEven"}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`
              }}
            >
              Row {virtualRow.index}
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

3. Possible options.

useVirtual({
  // size
  size = 0,
  // Function(index) => Integer
  estimateSize = defaultEstimateSize,
  // the amount of items to load both behind and ahead of the current window range
  overscan = 0,
  // the parent element whose inner-content is scrollable
  parentRef,
  // use horizontal instead
  horizontal,
  // smooth scroll
  // Function(offset, defaultScrollToFn) => void 0
  scrollToFn
});