[React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

 

import React, {Component} from 'react';
import {AutoSizer, List, CellMeasurer, CellMeasurerCache} from 'react-virtualized';

const ScreenInfo = ({width, height}) => (<span>width: {width} height: {height}</span>);

class App extends Component {

    constructor(props) {
        super(props);
        this.cache = new CellMeasurerCache({
            fixedWidth: true,
            defaultHeight: 50
        });
    }
    renderRow = ({key, isScrolling, parent, style, index}) => {
        return (
        <CellMeasurer
            key={key}
            cache={this.cache}
            parent={parent}
            columnIndex={0}
            rowIndex={index}
        >
            <div style={style} >
                name: {this.props.data[index].name}
                email: {this.props.data[index].email}
                height: <div style={{height: `${this.props.data[index].randomHeight}px`}}>{this.props.data[index].randomHeight}px</div>
            </div>
        </CellMeasurer>
        );
    };

    render() {
        return (
            <AutoSizer>
                {({width, height}) => {
                    return (
                        <div>
                            <ScreenInfo width={width} height={height}/>
                            <List
                                rowCount={this.props.data.length}
                                deferredMeasurementCache={this.cache}
                                rowHeight={this.cache.rowHeight}
                                rowRenderer={this.renderRow}
                                width={width}
                                height={height}
                            />

                        </div>
                    );
                }}
            </AutoSizer>
        );
    }
}

export default App;