Measure Component

/**
 * React component that provides element measurement capabilities via render props
 * @param {Object} props - Component props
 * @param {boolean} [props.client] - Include client measurements (clientTop, clientLeft, clientWidth, clientHeight)
 * @param {boolean} [props.offset] - Include offset measurements (offsetTop, offsetLeft, offsetWidth, offsetHeight)
 * @param {boolean} [props.scroll] - Include scroll measurements (scrollTop, scrollLeft, scrollWidth, scrollHeight)
 * @param {boolean} [props.bounds] - Include bounds measurements via getBoundingClientRect
 * @param {boolean} [props.margin] - Include margin measurements via getComputedStyle
 * @param {Object|Function} [props.innerRef] - Ref to access the internal component
 * @param {Function} [props.onResize] - Callback invoked when element dimensions change
 * @param {Function} props.children - Render prop function that receives measurement data
 * @returns {React.ReactElement}
 */
function Measure(props);

// Children render prop function receives object with:
// {
//   measureRef: function - Must be passed to the element you want to measure as its ref
//   measure: function - Function to programmatically trigger measurement
//   contentRect: object - Object containing the current measurements
// }

import React, { Component } from 'react';
import Measure from 'react-measure';

// Basic bounds measurement
class BasicExample extends Component {
  state = { dimensions: { width: -1, height: -1 } };

  render() {
    return (
      <Measure
        bounds
        onResize={contentRect => {
          this.setState({ dimensions: contentRect.bounds });
        }}
      >
        {({ measureRef }) => (
          <div ref={measureRef}>
            Size: {this.state.dimensions.width} x {this.state.dimensions.height}
          </div>
        )}
      </Measure>
    );
  }
}

// Multiple measurement types
class MultiMeasureExample extends Component {
  render() {
    return (
      <Measure bounds scroll margin>
        {({ measureRef, contentRect }) => (
          <div ref={measureRef} style={{ padding: '20px', overflow: 'auto' }}>
            <pre>{JSON.stringify(contentRect, null, 2)}</pre>
          </div>
        )}
      </Measure>
    );
  }
}

// With innerRef for external access
class InnerRefExample extends Component {
  elementRef = React.createRef();

  handleClick = () => {
    if (this.elementRef.current) {
      console.log('Direct access to element:', this.elementRef.current);
    }
  };

  render() {
    return (
      <Measure bounds innerRef={this.elementRef}>
        {({ measureRef }) => (
          <div ref={measureRef} onClick={this.handleClick}>
            Click me to log element to console
          </div>
        )}
      </Measure>
    );
  }
}

/**
 * Include client measurements in contentRect.client
 * @param {boolean} client - When true, includes clientTop, clientLeft, clientWidth, clientHeight
 */
client: true

/**
 * Include offset measurements in contentRect.offset
 * @param {boolean} offset - When true, includes offsetTop, offsetLeft, offsetWidth, offsetHeight
 */
offset: true

/**
 * Include scroll measurements in contentRect.scroll
 * @param {boolean} scroll - When true, includes scrollTop, scrollLeft, scrollWidth, scrollHeight
 */
scroll: true

/**
 * Include bounds measurements in contentRect.bounds
 * @param {boolean} bounds - When true, uses getBoundingClientRect()
 */
bounds: true

/**
 * Include margin measurements in contentRect.margin
 * @param {boolean} margin - When true, uses getComputedStyle() for margins
 */
margin: true