@types/react-window

FixedSizeList

FixedSizeList is used for rendering large lists where each item has the same size. It requires specifying the height and width of the list container, the item count, and the item size.

import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function Example() {
  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

VariableSizeList

VariableSizeList is similar to FixedSizeList but allows for items of varying sizes. It requires a function `itemSize` that returns the size of an item given its index.

import { VariableSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function Example() {
  const getItemSize = index => (index % 2 === 0 ? 50 : 25);

  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={getItemSize}
      width={300}
    >
      {Row}
    </List>
  );
}