React-window: VariableSizeList dynamic item height

Created on 26 Mar 2019 · 4Comments · Source: bvaughn/react-window

I am not sure how to implement this as from the example you fix the height. How do I measure the height of the item element? Perhaps I miss something in this repo. FYI, I'm implementing chat list which has dynamic height.

Source

muhaimincs

👍19

Most helpful comment

Hi @bvaughn, sorry for writing on a closed issue. I would just like to clarify this...
Does this mean that if I do not know upfront the height of my list items, there is no way for me to use VariableSizeList to render list items that have dynamic content? For example, if some of my list items have various size images in them, which I do not know upfront, I will not be able to use VariableSizeList to render windowed/virtualized list?

lazarnikolic1983 on 4 Nov 2019

👍18

All 4 comments

Gajesh-LH on 26 Mar 2019

👍7

That's not yet supported (unless you want to just in time measure the content, which I wouldn't really recommend).

Check out issue #6 for support status though.

bvaughn on 26 Mar 2019

lazarnikolic1983 on 4 Nov 2019

👍18

So there aren't any other packages that can measure the proposed content before rendering?

One of my use cases is to virtualize a messages window. In advance, I know the font, size, and text content.

If I know that my message bubble is going to be 500px wide, there's no way for me to figure out the height of the bubble unless I render it in the browser?

Just in time measurement kind of defeats the purpose of virtualization...

By the way thanks for the amazing package! I am using it very nicely for media feeds.

EDIT: Well as it turns out, just-in-time rendering actually isn't that bad, especially for simple text.

This example works perfectly: https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p

Per this comment: https://github.com/bvaughn/react-window/issues/6#issuecomment-538261156