Installing and Basic Setup of TanStack Virtual

Demonstrate the command to install TanStack Virtual in a React project and show the basic setup code to initialize a virtualized list.

npm install @tanstack/react-virtual@beta

This command installs the TanStack Virtual library as a dependency in your React project.

import { useRef } from 'react';
import { useVirtual } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);
  const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef
  });

  return (
    <div ref={parentRef} style={{ height: `500px`, width: `100%`, overflow: 'auto' }}>
      <div style={{ height: rowVirtualizer.totalSize + 'px', width: '100%', position: 'relative' }}>
        {rowVirtualizer.virtualItems.map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

This basic setup code demonstrates how to create a virtualized list. The 'useVirtual' hook from TanStack Virtual is utilized to only render items in the list that are currently visible based on the scroll position in a parent div.