tanstack-skills/tanstack-virtual

¿Qué hace tanstack-virtual?

Interfaz de usuario sin cabeza (headless) para virtualizar listas grandes de elementos a 60FPS en TS/JS, React, Vue, Solid, Svelte, Lit y Angular.

Características

• Virtualización eficiente: Renderiza solo los elementos visibles, manteniendo un rendimiento constante incluso con listas masivas.
• Soporte multiplataforma: Compatible con TypeScript/JavaScript, React, Vue, Solid, Svelte, Lit y Angular.
• Headless: Sin estilos predefinidos, lo que permite personalizar completamente la apariencia.
• 60FPS: Optimizado para el scroll fluido a 60 cuadros por segundo.

Instalación

npm install @tanstack/react-virtual
# o para otros frameworks:
npm install @tanstack/vue-virtual
npm install @tanstack/solid-virtual
npm install @tanstack/svelte-virtual
npm install @tanstack/lit-virtual
npm install @tanstack/angular-virtual
npm install @tanstack/virtual-core

Uso básico

Ejemplo con React

import { useVirtualizer } from '@tanstack/react-virtual'

function MyVirtualList() {
  const parentRef = React.useRef()

  const virtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  })

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map((item) => (
          <div key={item.key} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: `${item.size}px`, transform: `translateY(${item.start}px)` }}>
            Elemento {item.index + 1}
          </div>
        ))}
      </div>
    </div>
  )
}

Ejemplo con Vue

<template>
  <div ref=