Higher-Order Component

/**
 * Higher-order component that provides measurement functionality
 * @param {string|string[]} [types] - Measurement types: 'client', 'offset', 'scroll', 'bounds', 'margin'
 * @returns {Function} Function that accepts a component and returns wrapped component with measurement props
 */
function withContentRect(types);

// Returns function that wraps React components with measurement props:
// - measureRef: function to attach to measured element
// - measure: function to programmatically measure
// - contentRect: object with current measurements
// - All original Measure component props are also available

import React from 'react';
import { withContentRect } from 'react-measure';

// Single measurement type
const MeasuredDiv = withContentRect('bounds')(
  ({ measureRef, contentRect, ...props }) => (
    <div ref={measureRef} {...props}>
      Width: {contentRect.bounds?.width || 0}px
    </div>
  )
);

// Multiple measurement types
const FullyMeasuredComponent = withContentRect(['bounds', 'scroll', 'margin'])(
  ({ measureRef, measure, contentRect, children }) => (
    <div ref={measureRef} onClick={measure}>
      <h3>All Measurements:</h3>
      <pre>{JSON.stringify(contentRect, null, 2)}</pre>
      {children}
    </div>
  )
);

// Usage with custom props
const CustomMeasuredComponent = withContentRect('bounds')(
  ({ measureRef, contentRect, title, color }) => (
    <div ref={measureRef} style={{ color }}>
      <h2>{title}</h2>
      <p>Size: {contentRect.bounds?.width || 0} x {contentRect.bounds?.height || 0}</p>
    </div>
  )
);

// Using the wrapped components
function App() {
  return (
    <div>
      <MeasuredDiv />
      <FullyMeasuredComponent>
        <p>Child content here</p>
      </FullyMeasuredComponent>
      <CustomMeasuredComponent title="Custom Title" color="blue" />
    </div>
  );
}

// Use all enabled measurement types from props
withContentRect()

// Enable a single measurement type
withContentRect('bounds')
withContentRect('client')
withContentRect('offset')
withContentRect('scroll') 
withContentRect('margin')

// Enable multiple measurement types
withContentRect(['bounds', 'client'])
withContentRect(['bounds', 'scroll', 'margin'])

// Wrapped component receives all original props plus:
const wrappedComponentProps = {
  // ...originalProps - All the component's original props
  
  // Measurement props injected by withContentRect:
  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
  
  // All Measure component props are also available:
  client: boolean,           // Optional - enable client measurements
  offset: boolean,           // Optional - enable offset measurements
  scroll: boolean,           // Optional - enable scroll measurements
  bounds: boolean,           // Optional - enable bounds measurements
  margin: boolean,           // Optional - enable margin measurements
  innerRef: object,          // Optional - ref to access internal element
  onResize: function         // Optional - callback when dimensions change
};

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

class BaseComponent extends Component {
  render() {
    const { measureRef, contentRect, children } = this.props;
    const { width, height } = contentRect.bounds || { width: 0, height: 0 };
    
    return (
      <div ref={measureRef}>
        <p>Dimensions: {width} x {height}</p>
        {children}
      </div>
    );
  }
}

const MeasuredComponent = withContentRect('bounds')(BaseComponent);

// Usage
<MeasuredComponent onResize={rect => console.log('Resized:', rect)}>
  <p>Content that will be measured</p>
</MeasuredComponent>

const Measure = withContentRect()(
  ({ measure, measureRef, contentRect, children }) =>
    children({ measure, measureRef, contentRect })
);