reactjsreact-virtualized

React Virtualized Lists - Is the height prop referring to the height of the entire list or is it the height of the scrollable area?

I have a modal formatted like so: https://codesandbox.io/s/vigorous-ardinghelli-s3u65l?file=/src/App.js:222-1044

And after reading a few articles on virtualized lists, I was confused as to what the height prop was referring to in this code snippet from a tutorial:

<List
width={rowWidth}
height={listHeight}
rowHeight={rowHeight}
rowRenderer={this.renderRow}
rowCount={this.list.length} />

In the case of my layout, is the height of the list the height of the scrolling area or of my list itself? Because initially my list starts off with fewer items visible than when you start scrolling towards the end.

Solution

  • As you can see from the documentation

    Height constraint for list (determines how many actual rows are rendered)

    In other words, it defines the scrollable area. The library will use the rowCount and rowHeight props to define how big the list is.