VariableSizeList dynamic item height

[muhaimincs]

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.

[Gajesh-LH]

+1

[bvaughn]

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.

[lazarnikolic1983]

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?

[willsmanley]

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: #6 (comment)

[NadiaIdris]

Solution I implemented to get VariableSizeList row height based on text content:

See the responsive design - https://github.com/NadiaIdris/ts-log-viewer#logs-are-responsive
VariableSizeList - https://github.com/NadiaIdris/ts-log-viewer#variablesizelist

<AutoSizer
  onResize={() => {
    if (listRef.current !== null)
      listRef.current.resetAfterIndex(0, true);
  }}
>
  {({ height, width }) => {
    return (
      <List
        height={height}
        width={width}
        itemCount={logs.length}
        itemSize={(index) => getItemHeight(logs, index)} // itemHeight in pixels
        itemData={logs}
        ref={listRef as any}
        onScroll={(args) => handleScroll(args)}
      >
        {Row}
      </List>
    );
  }}
</AutoSizer>

// Function to get the height of each row in the list.
function getItemHeight(logs: LogLine[], index: number) {
  if (logs[index] === undefined) return 30;
  const { msg, ts } = logs[index];
  const formattedTs = formatDateTimeAMPM(new Date(ts * 1000));
  hiddenRowRef.current!["textContent"] = formattedTs + ": " + msg;
  const hiddenRowHeight = window
    .getComputedStyle(hiddenRowRef.current as Element)
    .getPropertyValue("height")
    .slice(0, -2);
  rowHeightsRef.current.push(Number(hiddenRowHeight));
  return Number(hiddenRowHeight);
}

[MaRuifeng]

I landed on a very similar implementation at https://codesandbox.io/s/react-window-dynamic-row-height-8ftbq, compared to the solution @willsmanley posted. But this example works with a static data list too responding to only window resizing events. The key to is to call the resetAfterIndex function of the VariableSizeList component upon each row size change!