bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.54k stars 779 forks source link

How can I access the list ref through the infinite loader ref? #680

Closed LoyalPotato closed 1 year ago

LoyalPotato commented 1 year ago

Hello,

I have a component that is using an InfiniteLoader component with a VariableSizeList. I'm passing a ref to the infinite loader so that I would be able to access the _listRef prop that is present when I view it with a console log. But using useRef<InfiniteLoader> says that the ref doesn't have this property, even though it does and if I ignore the ts error message it still works.

Am I using the wrong type or am I supposed to access the list ref through somewhere else?

LoyalPotato commented 1 year ago

What I ended up doing was create a ref to the list:

  const listRef = useRef<VariableSizeList<T> | null>(null);

And use a ref callback to set both refs (Infinite Loader and my local one):

    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={itemCount}
      loadMoreItems={(startIndex, stopIndex) => {
        fetchMoreItems(startIndex, stopIndex);
      }}
      minimumBatchSize={minBatchSize}
      ref={infiniteLoaderRef}
      threshold={threshold}
    >
      {({ onItemsRendered, ref }) => (
        <VariableSizeList<T>
          {...listProps}
          itemSize={getItemSize}
          height={visibleListHeight}
          width={visibleListWidth}
          itemCount={itemCount}
          onItemsRendered={onItemsRendered}
          ref={(elem) => { 
            // HERE
            ref(elem);
            listRef.current = elem;
          }}
        >
          {Item}
        </VariableSizeList>
      )}
    </InfiniteLoader>