React-window: Infinite scrolling multiple column list

[osdiab]

Hi, thanks for the great library! I'm not sure if this is the right place to ask questions about usage (some guidance on the repo on that would be appreciated), but here goes:

For my use case I'm trying to create an infinite list that is displayed as a grid of items with 3 columns per row. When I scroll to the bottom I want to use react-window-infinite-loader to load more entries from my API.

Initially I tried to implement my infinite, 3-column list with the FixedSizeGrid component; but then when I tried to use react-window-infinite-loader, I noticed that all the types are intended for lists, so it seems to be by default incompatible with Grid.

So that leaves me with a few apparent options:

1. Figure out how to use List with multiple columns. This seems ideal to me but I'm having trouble finding examples of how to do this
2. Figure out how to change react-window-infinite-loader or wrap my Grid in something to allow them to work together. I'm unclear on if this is possible
3. not use this library and find some other way to achieve this UI. Though I'd rather not!

Is my use case something that is supportable by this library / how would I go about doing it? I don't think this is a particularly rare use case so it might be worthwhile to have this kind of thing in the docs if it is natively supported.

[osdiab]

A related post I found on Stack Overflow, but it's vague enough that I'm not sure how to apply it exactly. https://stackoverflow.com/questions/57370902/react-window-fixedsizegrid-with-react-window-infinite-loader

[osdiab]

Ah looks like I got the code sandbox to work by the wrapper approach. I guess, is this the best way to achieve this kind of layout with this library?

https://codesandbox.io/s/fervent-darwin-i8ssl?fontsize=14&hidenavigation=1&theme=dark

Thanks again!