tanstack-skills/tanstack-virtual

Que fait tanstack-virtual ?

Interface utilisateur sans tête pour virtualiser de grandes listes d'éléments à 60 FPS en TS/JS, React, Vue, Solid, Svelte, Lit et Angular.

Présentation

@tanstack/react-virtual (et les packages équivalents pour les autres frameworks) fournit un ensemble de primitives pour créer des listes virtuelles avec un défilement performant. Il supporte le défilement vertical, horizontal, les grilles, les listes de taille variable, et bien plus encore.

Installation

# Pour React
npm install @tanstack/react-virtual

# Pour Vue
npm install @tanstack/vue-virtual

# Pour Solid
npm install @tanstack/solid-virtual

# Pour Svelte
npm install @tanstack/svelte-virtual

# Pour Lit
npm install @tanstack/lit-virtual

# Pour Angular
npm install @tanstack/angular-virtual

# Pour du JavaScript/TypeScript pur
npm install @tanstack/virtual-core

Utilisation rapide (React)

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

function VirtualList({ items }) {
  const parentRef = useRef(null)

  const virtualizer = useVirtualizer({
    count: items.length,
    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((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>
  )
}

Fonctionnalités principales

• Virtualisation pure : Aucun style imposé, vous contrôlez entièrement l'apparence.
• Compatibilité multi-frameworks : Packages dédiés pour React, Vue, Solid, Svelte, Lit et Angular, ainsi qu'un noyau générique virtual-core.
• Défilement fluide : Optimisé pour maintenir 60 FPS même avec des centaines de milliers d'éléments.
• Tailles d'éléments dynamiques : Les éléments peuvent avoir des hauteurs/largeurs variables, avec mesure automatique ou estimations initiales.
• Grilles et listes : Support des listes unidimensionnelles (verticale/horizontale) et des grilles bidimensionnelles.
• API réactive : Hooks pour React, Vue, Solid, etc., ainsi qu'une API manuelle pour les autres frameworks.

Documentation

Pour plus d'informations, consultez la documentation officielle.