Einleitung | TanStack Virtual Docs

TanStack Virtual ist ein Headless UI Utility zur Virtualisierung langer Elementlisten in JS/TS, React, Vue, Svelte, Solid, Lit und Angular. Es ist keine Komponente und liefert daher keinen Markup oder Stile für Sie mit oder rendert diese. Während dies ein wenig Markup und Stile von Ihnen erfordert, behalten Sie 100 % die Kontrolle über Ihre Stile, Ihr Design und Ihre Implementierung.

Der Virtualizer

Im Herzen von TanStack Virtual ist der Virtualizer. Virtualizer können entweder auf der vertikalen (Standard) oder horizontalen Achse ausgerichtet werden, was es möglich macht, vertikale, horizontale und sogar gitterähnliche Virtualisierung zu erreichen, indem die beiden Achsenkonfigurationen kombiniert werden.

Hier ist nur ein kurzes Beispiel, wie das Virtualisieren einer langen Liste innerhalb eines Divs mit TanStack Virtual in React aussieht

tsx

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

function App() {
  // The scrollable element for your list
  const parentRef = React.useRef(null)

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

  return (
    <>
      {/* The scrollable element for your list */}
      <div
        ref={parentRef}
        style={{
          height: `400px`,
          overflow: 'auto', // Make it scroll!
        }}
      >
        {/* The large inner element to hold all of the items */}
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}
        >
          {/* Only the visible items in the virtualizer, manually positioned to be in view */}
          {rowVirtualizer.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)`,
              }}
            >
              Row {virtualItem.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

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

function App() {
  // The scrollable element for your list
  const parentRef = React.useRef(null)

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

  return (
    <>
      {/* The scrollable element for your list */}
      <div
        ref={parentRef}
        style={{
          height: `400px`,
          overflow: 'auto', // Make it scroll!
        }}
      >
        {/* The large inner element to hold all of the items */}
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}
        >
          {/* Only the visible items in the virtualizer, manually positioned to be in view */}
          {rowVirtualizer.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)`,
              }}
            >
              Row {virtualItem.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

Tauchen wir ein in weitere Beispiele!

Einführung

Der Virtualizer

Bytes abonnieren

Bytes abonnieren