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}
After navigating the developer's code has used and I found out how onItemsRendered works.
It needs the visibleStartIndex,visibleStopIndex in order to return the proper state. So to get the current Row and return the proper state do the following below.
<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
