2

I'm using 'react-virtualized' to render an infinite scrolling list.

However, I am having trouble rendering the rowHeight dynamically. I made an attempt, but it only is relevent for desktop, and feels wrong.

I tried following the examples, but had no success.

What is the correct way to calculate the true row height?

It should be responsive to mobile.

Here is an example:

https://codesandbox.io/s/ADARgvlxB

class App extends React.Component {

  render() {

    return (
      <div>

        <AutoSizer>
        {({ height, width }) => (
        <List
          height={600}
          width={width}
          rowCount={foo.length}
          rowHeight={({ index }) => {
            const x = foo[index];
            if (x.name.length < 10) { return 20; } 
            else if (x.name.length > 9) { return 40;}
          }}
          rowRenderer={({ index, style }) => {
            const x = foo[index];
            return (
              <div key={index} style={style}>
                {x.name}
              </div>
            );
          }}
        />
        )}
        </AutoSizer>
      </div>
    );
  }
}

1 Answer 1

4

What is the correct way to calculate the true row height?

This is what the react-virtualized CellMeasurer component is for. You can see a demo of it measuring dynamic heights here. The source code for the demo are the *.example.js files here.

2
  • As I mentioned, I tried following their example but had no success. Images have set height (px) whereas I will be accounting for text.
    – Ycon
    Commented Aug 1, 2017 at 12:39
  • The Code Sandbox you linked to doesn't seem to be following the example because it doesn't use CellMeasurer. Check out the links I provided above again.
    – bvaughn
    Commented Aug 1, 2017 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.