I'm using react-window to implement a chat message list, but I'm getting stuck trying to set the right itemSize to each item. Happens that a chat message, based on his text length and window width, hasn't always a prefixed height (or a height that i can calculate in a simple way).

I'm currently using a VariableSizeList and the code looks like this

<AutoSizer>
    {({ height, width }) => (
       <List
        height={height}
        itemCount={messages.length}
        itemSize={(index) => messages[index].isReply ? 118 : 79} /* THIS IS CURRENTLY WRONG, DOESN'T PICK ALL CASES!*/
        width={width}
       >
         {({ index, style }) => (
           <ChatMessage
            key={index}
            style={style}
            ...
           />
         )}
       </List>
    )}

Is there a way to set the item height of the list row equal to the ACTUAL height of its content?

I'm using react-window to implement a chat message list, but I'm getting stuck trying to set the right itemSize to each item. Happens that a chat message, based on his text length and window width, hasn't always a prefixed height (or a height that i can calculate in a simple way).

I'm currently using a VariableSizeList and the code looks like this

<AutoSizer>
    {({ height, width }) => (
       <List
        height={height}
        itemCount={messages.length}
        itemSize={(index) => messages[index].isReply ? 118 : 79} /* THIS IS CURRENTLY WRONG, DOESN'T PICK ALL CASES!*/
        width={width}
       >
         {({ index, style }) => (
           <ChatMessage
            key={index}
            style={style}
            ...
           />
         )}
       </List>
    )}

Is there a way to set the item height of the list row equal to the ACTUAL height of its content?

• javascript
• reactjs
• list
• resize
• react-window

• Did you ever found a working solution? – Mutu A. Commented Jul 24, 2022 at 17:30

1 Answer 1

That's a little tricky and not officially supported by react-window as discussed in this issue. Apparantly one way to trick this is by using Element.getBoundingClientRect().height and setting the size of this Element via itemSize. An example is given here https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.js