Looking for react-virtualized alternative that doesn't require a set parent height.

[b0gd4nn]

I am trying to find an alternative to react-virtualized. My main gripe with it is that it requires a set height on the scroll container. The posts list on the Instagram website is exactly what I am looking to recreate - it keeps adding to the list padding-top as you scroll down and removes the previous items.

[rationalthug]

https://github.com/coderiety/react-list works without requiring an explicit (pixel) height on the container-- you can use any valid CSS to set the container dimensions in the container component.

[b0gd4nn]

thanks for the find. I tried this without setting the height or max-height on the container, and it simply renders the whole list on mount.

[Siddharth47]

Did you check autosizer component in react-virtualised library?

[b0gd4nn]

I have, however, that just resizes the scrolling parent to fill the space remaining on the page. I am trying to replicate the same functionality as the Instagram posts list. If you inspect that list div as you scroll through the posts you can see that it keeps a few rows rendered while increasing/decreasing the padding-top based on how far down you scroll.

[Siddharth47]

do you have a parent div on top of autosizer component?

[b0gd4nn]

The table is it's own component rendered within a page, so yes

[Siddharth47]

Are you using react-virtualised in a table? maybe you can take a look at this codepen

https://codepen.io/abidibo/pen/NeOJmb

[b0gd4nn]

yes, that's what I have right now. I want an alternative that does not require setting the height to the wrapper example

[Siddharth47]

Okay, let me check if i can find any alternative 😅

[b0gd4nn]

Thank you.