How can a infinite scroll item have a dynamic height? #479

zi-gae · 2023-01-20T12:49:45Z

zi-gae
Jan 20, 2023

In the official documentation, the height setting is understood as follows:

const rowVirtualizer = useVirtualizer({
  count: hasNextPage ? allRows.length + 1 : allRows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 300, // item height
  overscan: 4,
});

If the height of A changes according to the response of the server, is there a way to dynamically change the height?

my code:

function VirtualizerScroll() {
  const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery(...params);
  const parentRef = React.useRef<HTMLDivElement>(null);

const allRows = data ? data.pages.flatMap((d) => d.rows) : []

  const rowVirtualizer = useVirtualizer({
    count: hasNextPage ? allRows.length + 1 : allRows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 300,
    overscan: 4,
  });

  const items = rowVirtualizer.getVirtualItems();
  React.useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();

    if (!lastItem) {
      return;
    }

    if (lastItem.index >= allRows.length - 1 && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allProducts.length,
    isFetchingNextPage,
    rowVirtualizer.getVirtualItems(),
  ]);

  return (
    <div
      ref={parentRef}
      style={{
        height: 1000,
        width: '100%',
        overflowY: 'auto',
      }}
    >
      <div
        style={{
          height: rowVirtualizer.getTotalSize(),
          width: '100%',
          position: 'relative',
        }}
      >
        {items.map((virtualRow) => {
          const response = allRows[virtualRow.index];
          return (
            <div
              key={virtualRow.key}
              data-index={virtualRow.index}
              ref={rowVirtualizer.measureElement}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
              <DynamicCard response={response}   />
            </div>
          );
        })}
      </div>
    </div>
  );
}