get height from element style [feature request]

[damianobarbati]

What about adding the possibility to not give an "height" prop and derive it from element.style.height?

Use case:

I already deal with height in my classes for proper UI and it's redundant to add the logic twice into renderer.

@withWindowSize //HOC passing window height and width
@injectSheet(theme => ({
   tbody: ({ windowHeight }) => ({
      width: '100%',
      height: windowHeight - headerHeight - theadHeight,
   }),
}))
export default class Table extends React.Component {
....
       render = () => {
            const { windowHeight, classes } = this.props; //windowHeight from HOC not needed!
            const { items } = this;

             const tbodyHeight = windowHeight - headerHeight - theadHeight; //AGAIN!

             return (
                 <VirtualList
                    className={classes.tbody} //here element has already proper style.height applied
                    height={tbodyHeight}
                    .... 
                  />
              );
         }
}

[clauderic]

The height needs to be known in advance, as this is how the height of the scrollable list can be calculated.

Reading from computed style would be slow and expensive, as you would need to wait for the DOM node to be mounted to know it's computed height.

[Venryx]

Personally I prefer the approach described here: https://github.com/coderiety/react-list#itemsizeestimatorindex-cache

What it does is that:

• For items that have been scrolled to/rendered, the heights are cached so you know the exact height (but without extra rendering).
• For items that have not been scrolled to/rendered, call the itemSizeEstimator function. This determines how much space is added to the end of the list for not-yet-reached items. However, once those items are scrolled to, we then know the real height so update the list height to match.

I know react-tiny-virtual-list has the estimatedItemSize prop, which is similar. However, it's not as good because it's a "one number for every item" property, instead of an estimator-function which can adjust based on, for example, the number of characters in a chat message, to get a more accurate height estimate (thus causing less scroll janking).