Function List

packages/react-virtual/tests/index.test.tsx:32–104

({
  count = 200,
  overscan,
  height = 200,
  width = 200,
  itemSize,
  rangeExtractor,
  dynamic,
}: ListProps)

}

function List({
  count = 200,
  overscan,
  height = 200,
  width = 200,
  itemSize,
  rangeExtractor,
  dynamic,
}: ListProps) {
  renderer()

  const parentRef = React.useRef<HTMLDivElement>(null)

  const elementRectCallbackRef = React.useRef<
    ((rect: { height: number; width: number }) => void) | null
  >(null)

  const rowVirtualizer = useVirtualizer({
    count,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan,
    observeElementRect: (_, cb) => {
      cb({ height, width })
      elementRectCallbackRef.current = cb
    },
    measureElement: () => itemSize ?? 0,
    rangeExtractor,
  })

  React.useEffect(() => {
    elementRectCallbackRef.current?.({ height, width })
  }, [height, width])

  const measureElement = dynamic ? rowVirtualizer.measureElement : undefined

  const items = rowVirtualizer.getVirtualItems()

  return (
    <div
      ref={parentRef}
      style={{ height, width, overflow: 'auto' }}
      data-testid="scroller"
    >
      <div
        style={{
          height: rowVirtualizer.getTotalSize(),
          width: '100%',
          position: 'relative',
        }}
      >
        {items.map((virtualRow) => (
          <div
            data-testid={`item-${virtualRow.key}`}
            key={virtualRow.key}
            data-index={virtualRow.index}
            ref={measureElement}
            style={{