Simple Render Prop component to poll element measurements

ClientRect.jsx

import React, { PureComponent } from 'react'

/*
 * 	PollBounds
 *	render with referenced element measurements
 *	@param measureRef: React.Ref
 *	@param pollTime: number - polling time for polling client rect
 *	@param children({ bounds })
 */

export default class ClientRect extends PureComponent {
	static defaultProps = {
		pollTime: 300,
		measureRef: null
	}

	componentDidMount() {
		const { pollTime } = this.props
		this._interval = setInterval(this.pollBounds, pollTime)
	}

	componentWillUnmount() {
		clearInterval(this._interval)
	}

	pollBounds = () => {
		const { measureRef } = this.props
		if(measureRef.current) {
			const { top, left, bottom, right, height, width } = measureRef.current.getBoundingClientRect()
			this.setState({ top, left, bottom, right, height, width })
		}
	}

	render() {
		return this.props.children(this.state)
	}
}