Basic Setup of TanStack Virtual in React
Demonstrate how to install TanStack Virtual and create a basic virtualized list component in a React application.
// Step 1: Install TanStack Virtual via npm or yarn
// npm install @tanstack/react-virtual
// yarn add @tanstack/react-virtual
This step installs the TanStack Virtual package, which is necessary for creating a virtualized list in React.
import React, { useRef } from 'react';
import { useVirtual } from '@tanstack/react-virtual';
Import necessary hooks from React and TanStack Virtual. useRef is used to reference the scrolling container, and useVirtual is the core hook of TanStack Virtual for implementing virtualization.
function VirtualList() {
// Ref for the parent container
const parentRef = useRef();
// Create items array
const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
// Initialize the virtualizer
const rowVirtualizer = useVirtual({
size: items.length, // Number of items
parentRef, // Reference to the scrolling container
});
return (
<div
ref={parentRef}
style={{
height: `150px`,
width: `300px`,
overflow: 'auto'
}}
>
<div
style={{
height: `${rowVirtualizer.totalSize}px`,
width: '100%',
position: 'relative'
}}
>
{rowVirtualizer.virtualItems.map(virtualItem => (
<div
key={virtualItem.index}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`
}}
>
{items[virtualItem.index]}
</div>
))}
</div>
</div>
);
}
Defines the VirtualList component. It uses useVirtual to create a virtualizer instance with information about the items and parent container. Items are rendered based on their virtual position for efficient, high-performance lists.