Initializing TanStack Virtual with Basic Configuration
Demonstrate how to set up TanStack Virtual in a React component, including necessary props for initializing a basic virtualized list.
import { useVirtualizer } from '@tanstack/react-virtual';
First, import the useVirtualizer hook from '@tanstack/react-virtual'. This hook is essential for creating virtual lists or grids.
import { useRef } from 'react';
Import the useRef hook from React. This will be used to reference the scrolling container of the virtual list.
const VirtualList = ({ items }) => {
Define a React functional component called VirtualList which accepts an items prop.
const parentRef = useRef();
Inside the component, create a ref for the parent container using useRef hook. This ref will be used by the virtualizer to track the scroll container.
const rowVirtualizer = useVirtualizer({
Initialize the virtualizer using the useVirtualizer hook, providing it the needed configuration.
count: items.length,
Specify the number of items in your list via the count property. It tells the virtualizer how many items are in the list.
getScrollElement: () => parentRef.current,
Provide the scrolling element to the virtualizer. It uses the parentRef to get the element.
estimateSize: () => 35,
Define an estimate size for each item in the list. This helps in calculating the virtual space.
overscan: 5
Optionally define how many items to prerender outside of the viewable area to make scrolling smoother.
});
Close the configuration object and the useVirtualizer hook call.
return (
Start the return statement of the component.
<div ref={parentRef} style={{ overflow: 'auto', maxHeight: '100vh' }}>
Render the scroll container div and assign the parentRef to it. Style it to enable scrolling.
<div style={{ height: rowVirtualizer.getTotalSize() }}>
Inside the scroll container, render another div with a dynamic height based on the total size calculated by the virtualizer.
{rowVirtualizer.getVirtualItems().map(virtualRow => (
Map over the virtual items provided by the virtualizer. Each item represents a portion of your list that should be rendered based on the scrolling.
<div key={virtualRow.index} style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${virtualRow.start}px)` }}>
Render each item in an absolutely positioned div, translating it along the Y-axis to its calculated position.
{items[virtualRow.index]}
Access and display the actual item from the items array using the current index.
</div>
Close the div for the virtual item.
))}
Close the map function.
</div>
Close the virtual container div.
</div>
Close the scroll container div.
);
Close the return statement.
};
Close the component definition.
export default VirtualList;
Export the VirtualList component for use in other parts of your application.