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}
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