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

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]

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. 😄

[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.