[React] Create an Auto Resizing Virtualized List with react-virtualized

Posted 2020-09-25 Answer1215

In this lesson we‘ll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We‘ll then use theList component to render our set of data as a virtualized list into the DOM using windowing.

 

Install:

npm install --save react-vistualized

 

import React, {Component} from ‘react‘;
import {AutoSizer, List} from ‘react-virtualized‘;

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

class App extends Component {

    renderRow = ({key, isScrolling, style, index}) => {
        return (
            <div style={style} key={key}>
                name: {this.props.data[index].name}
                email: {this.props.data[index].email}
            </div>
        );
    };

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

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

export default App;