Setting Up TanStack Virtual Grid
Shows the basic setup of TanStack Virtual Grid in a React component, including installation via npm and initial grid configuration.
import { useVirtualizer } from '@tanstack/react-virtual';
Import the useVirtualizer hook from the @tanstack/react-virtual package.
import React, { useRef } from 'react';
Import useRef from React for referencing the grid container.
const VirtualGrid = () => {
const gridRef = useRef(null);
const rowVirtualizer = useVirtualizer({
count: 10000, // Total number of items
getScrollElement: () => gridRef.current, // Grid container reference
estimateSize: () => 35, // Estimated size of an item
overscan: 5, // Number of items to render outside of the visible area
});
return (
<div ref={gridRef} style={{ height: '500px', overflow: 'auto' }}>
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.key}
style={{
height: `${virtualRow.size}px`,
transform: `translateY(${virtualRow.start}px)`
}}
>
Item {virtualRow.index}
</div>
))}
</div>
);
};
The VirtualGrid component sets up a virtualized grid with 10000 items, each with an estimated size of 35px. The grid is wrapped in a div that has a fixed height and overflow set to auto to enable scrolling. Each virtualized item is rendered with a transform property to place it in the correct position within the container.
export default VirtualGrid;
Exports the VirtualGrid component for use in other parts of the application.