ObserveDimensions ReactComponent Using Render Props

observe-dimensions.js

class ObserveDimensions extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            width: null,
            height: null
        }
        this.elementToObserve = React.createRef()
    }

    componentDidMount(nextProps) {
        const erd = elementResizeDetectorMaker({ strategy: 'scroll' })

        erd.listenTo(this.elementToObserve.current, element => {
            this.setState({
            width: element.offsetWidth,
            height: element.offsetHeight
        })
    });
    }

    render() {
        return (
            <div className="observed-element" ref={this.elementToObserve}>
                {this.props.render({
                    width: this.state.width,
                    height: this.state.height
                })}
            </div>
        )
    }
}