Dynamic row heights with react-virtualized and new CellMeasurer
I need to update the row heights when the list data has changed. The current CellMeasurer doc doesn't seem to have any info on the new public methods.
Admittedly the docs could be improved, with regard to the new CellMeasurer
. In this case though, you need to do 2 things in respond to your row data/sizes changing:
- If a specific list-item has changed size then you need to clear its cached size so it can be remeasured. You do this by calling
clear(index)
onCellMeasurerCache
. (Pass theindex
of the row that's changed.) - Next you'll need to let
List
know that its size information needs to be recalculated. You do this by callingrecomputeRowHeights(index)
. (Pass theindex
of the row that's changed.)
For an example of something similar to what you're describing, check out the example Twitter-like app I built with react-virtualized. You can see the source here.
if (this.props.list.length !== nextProps.list.length) {
cache.clearAll();
}
This helped me! :)