react-infinite-any-height/src/GetHeightWrapper.jsx

Wrapper component for react-infinite which auto calculates element heights.

import React from "react"
import PropTypes from "prop-types"

const style = {
  "display": "block",
  "clear": "both",
}

export default class GetHeightWrapper extends React.Component {
  static propTypes = {
    "addHeight": PropTypes.func,
    "children": PropTypes.node,
  }

  state = {
    "height": undefined,
  }

  componentDidMount = () => {
    this.setHeight ()
  }

  setHeight = () => {
    const height = this.node.getBoundingClientRect ().height
    this.props.addHeight (height)
    this.setState ({ height })
  }

  render = () => (
    <span
      ref={(node) => {this.node = node}}
      style={style}
    >
      {this.props.children}
    </span>
  )
}