Aliendreamer

dynamic react virtualized height example

Dec 26th, 2020
1,538
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
  3.  
  4. // In this example, average cell height is assumed to be about 50px.
  5. // This value will be used for the initial `Grid` layout.
  6. // Width is not dynamic.
  7. const cache = new CellMeasurerCache({
  8.   defaultHeight: 50,
  9.   fixedWidth: true
  10. });
  11.  
  12. function rowRenderer ({ index, isScrolling, key, parent, style }) {
  13.   const source // This comes from your list data
  14.  
  15.   return (
  16.     <CellMeasurer
  17.       cache={cache}
  18.       columnIndex={0}
  19.       key={key}
  20.       parent={parent}
  21.       rowIndex={index}
  22.     >
  23.       {({ measure, registerChild }) => (
  24.         // 'style' attribute required to position cell (within parent List)
  25.         <div ref={registerChild} style={style}>
  26.           <img
  27.             onLoad={measure}
  28.             src={source}
  29.           />
  30.         </div>
  31.       )}
  32.     </CellMeasurer>
  33.   );
  34. }
  35.  
  36. function renderList (props) {
  37.   return (
  38.     <List
  39.       {...props}
  40.       deferredMeasurementCache={cache}
  41.       rowHeight={cache.rowHeight}
  42.       rowRenderer={rowRenderer}
  43.     />
  44.   );
  45. }
Advertisement
Add Comment
Please, Sign In to add comment