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 });
Previews:
Download Details:
Author: tannerlinsley
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/tannerlinsley/react-virtual
License: MIT