How to show the index the user is currently with react-window List + Infinte Loader

Question

I came to this problem when I wanted to show my user at which point he/she was on the list when they were scrolling. In short, I wanted to have a counter indicating the current index of the visible Row.

This can be achieved with onItemsRendered.

However, when using react-window-infinite-loader that prop is taken from the children's value needed to load else it is stuck to the loading state.

onItemsRendered={onItemsRendered}

Answer 1

To return the desired state, onItemsRendered needs to receive visibleStartIndex and visibleStopIndex. To get the current row and return the correct state, try the following:

<List
  className="List"
  height={200}
  itemCount={1000}
  itemSize={200}
  onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
    this.setState({ counter: visibleStartIndex + 1 });
    return onItemsRendered({ visibleStartIndex, visibleStopIndex });
  }}
  ref={ref}
  width={300}
>
  {Row}
</List>

In addition here is a working example: https://stackblitz.com/edit/react-list-counter