React-virtualized: Docs request - additional examples/clarification for using CellMeasurer with a List

[bsbechtel]

With the recent changes in the CellMeasurer API, some of the docs are a little hard to follow. Could you provide additional examples or clarification on how CellMeasurer should be used with a List component?

For my specific situation, I'm trying to understand how to write the rowRenderer function passed into a List. The List docs show the props for the rowRenderer function as:

Responsible for rendering a row. Signature should look like ({ index: number, key: string, style: Object, isScrolling: boolean }): React.PropTypes.node and the returned element must handle index, key and style.

Yet the CellMeasurer docs show an example as:

function rowRenderer ({ index, isScrolling, key, parent, style }) {
  const source // This comes from your list data

  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
    >
      {({ measure }) => (
        <img
          onLoad={measure}
          src={source}
        />
      )}
    </CellMeasurer>
  );
}

The rowRenderer function used in the grid example just above on the CellMeasurer docs page has a different set of props passed into the function. The use of ES6 destructuring makes it really hard to follow what properties we have access to in each of these different contexts. Maybe a separate docs page explaining how to use rowRenderer in each of these three contexts could be helpful? Thanks

[bvaughn]

I'm sorry to hear that you've found the docs confusing. As someone who's intimately familiar with the project, it can be difficult to write docs that are approachable to users who are less familiar.

Could you provide additional examples or clarification on how CellMeasurer should be used with a List component?

There's an example checked into the project that you may find useful (demo here, source code here). It shows using a CellMeasurerCache with a List to measure heights of lazy-loaded images. The docs here also show the combination of CellMeasurer and List (albeit with the more advance measure callback param).

The rowRenderer function used in the grid example just above on the CellMeasurer docs page has a different set of props passed into the function.

The List (and Grid and Table) actually do pass a parent parameter to rowRenderer- but it isn't mentioned too prominently in the List docs because it's only intended for consumption with the CellMeasurer. You can ignore the parameter otherwise.

The use of ES6 destructuring makes it really hard to follow what properties we have access to in each of these different contexts. Maybe a separate docs page explaining how to use rowRenderer in each of these three contexts could be helpful?

I am happy to add a more in-depth rowRenderer section to the List docs here. I would also encourage you to feel free to contribute improvements to the docs yourself if you can think of additional ways to improve them.

[rclai]

Um, what if you don't have any images on your List? What do you do with the measure function?

[bvaughn]

Don't use it. That's showing how you could use a render callback, which has access to the measure function, to handle async measurements. If you don't need them (b'c your content is text, for example) then don't use that prop at all.

[rclai]

I'm confused, so if that's the case does my content still need to be rendered in a child function? I'm getting a really weird flicker when scrolling down.

In the rowRenderer I'm seeing that the parent argument prop is a Grid, and I'm passing that to the CellMeasurer. Is that intentional?

[bvaughn]

Did you look at the docs and examples? I show an example of using CellMeasurer with plain text content that doesn't use the measure param.

If you're having troubles with the component, I suggest asking in Slack. I prefer not to use Github issues for discussion. 😄

[rclai]

Sorry didn't want to flood this thread but you don't have an example of a CellMeasurer on a List that doesn't use measure. This example is the only one I'm seeing. The other ones use Grid and Table.

[bvaughn]

If you're having troubles with the component, I suggest asking in Slack.

[bsbechtel]

@bvaughn Thanks for updating the docs. It helped immensely with my problem. I ended up looking into the source code and using the cache clear functions some because my infinite loader has different types of data going into it. If I get a chance to do a PR and expand on how to use the cache, I'd be happy to do so. It might take a little time to get it done though.

[bvaughn]

Thanks @bsbechtel! No hurry but docs PRs are always welcome. 😄

[batamire]

I'm trying to implement InfiniteLoader for a messaging system with text of relative height. I'm having a hard time understanding where to put <CellMeasurer> in rowRenderer... How should I call measure() on STATUS_LOADED? If I go without measure(), text overlaps once messages get loaded.

Docs are really hard for someone new with React :)

[bvaughn]

This minimal Twitter app shows a complete integration of AutoSizer + List + CellMeasurer. It's source code is here. The specific component that ties things together is here. Check that out for a reference, @batamire. 😄