How To Measure A Rows Height In React-virtualized List

I'm a little uncertain as how to achieve dynamic heights of a List using react-virtualized. I have a component as follows: import { List } from 'react-virtualized';

Solution 1:

Sorry you found the docs to be confusing. I will try to update them to be clearer. Hopefully this will help:

import { CellMeasurer, List } from 'react-virtualized';

function renderList (listProps) {
  return (
    <CellMeasurer
      cellRenderer={
        // CellMeasurer expects to work with a Grid
        // But your rowRenderer was written for a List
        // The only difference is the named parameter they
        // So map the Grid params (eg rowIndex) to List params (eg index)
        ({ rowIndex, ...rest }) => listProps.cellRenderer({ index: rowIndex, ...rest })
      }
      columnCount={1}
      rowCount={listProps.rowCount}
      width={listProps.width}
    >
      {({ getRowHeight, setRef }) => (
        <List
          {...listProps}
          ref={setRef}
          rowHeight={getRowHeight}
        />
      )}
    </CellMeasurer>
  )
}

There are also demos of this component here showing how it's used.

Share