Initializing TanStack Virtual Core with Basic Configuration

Demonstrate how to initialize TanStack Virtual Core in a JavaScript project, including the basic configuration settings for optimal performance.

import { createVirtualizer } from '@tanstack/virtual-core';

Importing the createVirtualizer function from the @tanstack/virtual-core package.

const virtualizer = createVirtualizer({
  count: 1000, // Total number of items
  getScrollElement: () => document.getElementById('scroll-container'), // Element to track scroll
  estimateSize: () => 50, // Estimated size of each item
  overscan: 5, // Number of items to render outside the viewport
});

Initializing the virtualizer with basic configuration, including total item count, a function to get the scroll container element, an estimated size for each item, and an overscan value to render items outside the viewport for smoother scrolling.