A small example of how to use Material-UI with react-virtualized
import React, { Component } from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import FolderIcon from '@material-ui/icons/Folder';
import { AutoSizer, List as VirtualList, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
class MyList extends Component {
cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 90,
});
state = {
items: [...Array(10000)],
};
renderRow = ({ index, parent, key, style }) => (
<CellMeasurer key={key} cache={this.cache} parent={parent} columnIndex={0} rowIndex={index}>
<ListItem style={style} component="div" divider>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText
primary={`Single-line item: ${index}`}
// secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
</CellMeasurer>
);
renderList = () => (
<AutoSizer>
{({ width, height }) => (
<VirtualList
ref={(list) => {
this.list = list;
}}
rowCount={this.state.items.length}
width={width}
height={height}
deferredMeasurementCache={this.cache}
rowHeight={this.cache.rowHeight}
rowRenderer={this.renderRow}
overscanRowCount={25}
// ...moarProps
/>
)}
</AutoSizer>
);
render() {
return <List dense={false} component={this.renderList} />;
}
}
export default MyList;