0
# Higher-Order Component
1

2
The withContentRect higher-order component provides an alternative API for adding measurement capabilities to React components. It wraps components and injects measurement data as props.
3

4
## Capabilities
5

6
### withContentRect HOC
7

8
Creates a higher-order component that provides measurement functionality to wrapped components.
9

10
```javascript { .api }
11
/**
12
 * Higher-order component that provides measurement functionality
13
 * @param {string|string[]} [types] - Measurement types: 'client', 'offset', 'scroll', 'bounds', 'margin'
14
 * @returns {Function} Function that accepts a component and returns wrapped component with measurement props
15
 */
16
function withContentRect(types);
17

18
// Returns function that wraps React components with measurement props:
19
// - measureRef: function to attach to measured element
20
// - measure: function to programmatically measure
21
// - contentRect: object with current measurements
22
// - All original Measure component props are also available
23
```
24

25
The returned wrapped component accepts the same props as the Measure component and injects the same render props.
26

27
**Usage Examples:**
28

29
```javascript
30
import React from 'react';
31
import { withContentRect } from 'react-measure';
32

33
// Single measurement type
34
const MeasuredDiv = withContentRect('bounds')(
35
  ({ measureRef, contentRect, ...props }) => (
36
    <div ref={measureRef} {...props}>
37
      Width: {contentRect.bounds?.width || 0}px
38
    </div>
39
  )
40
);
41

42
// Multiple measurement types
43
const FullyMeasuredComponent = withContentRect(['bounds', 'scroll', 'margin'])(
44
  ({ measureRef, measure, contentRect, children }) => (
45
    <div ref={measureRef} onClick={measure}>
46
      <h3>All Measurements:</h3>
47
      <pre>{JSON.stringify(contentRect, null, 2)}</pre>
48
      {children}
49
    </div>
50
  )
51
);
52

53
// Usage with custom props
54
const CustomMeasuredComponent = withContentRect('bounds')(
55
  ({ measureRef, contentRect, title, color }) => (
56
    <div ref={measureRef} style={{ color }}>
57
      <h2>{title}</h2>
58
      <p>Size: {contentRect.bounds?.width || 0} x {contentRect.bounds?.height || 0}</p>
59
    </div>
60
  )
61
);
62

63
// Using the wrapped components
64
function App() {
65
  return (
66
    <div>
67
      <MeasuredDiv />
68
      <FullyMeasuredComponent>
69
        <p>Child content here</p>
70
      </FullyMeasuredComponent>
71
      <CustomMeasuredComponent title="Custom Title" color="blue" />
72
    </div>
73
  );
74
}
75
```
76

77
### Configuration Options
78

79
The withContentRect HOC accepts the same configuration as the Measure component props.
80

81
#### No Configuration
82

83
```javascript { .api }
84
// Use all enabled measurement types from props
85
withContentRect()
86
```
87

88
When called without arguments, measurement types are determined by the props passed to the wrapped component.
89

90
#### Single Type
91

92
```javascript { .api }
93
// Enable a single measurement type
94
withContentRect('bounds')
95
withContentRect('client')
96
withContentRect('offset')
97
withContentRect('scroll') 
98
withContentRect('margin')
99
```
100

101
#### Multiple Types
102

103
```javascript { .api }
104
// Enable multiple measurement types
105
withContentRect(['bounds', 'client'])
106
withContentRect(['bounds', 'scroll', 'margin'])
107
```
108

109
### Wrapped Component Props
110

111
The wrapped component receives all the original props plus the measurement props:
112

113
```javascript { .api }
114
// Wrapped component receives all original props plus:
115
const wrappedComponentProps = {
116
  // ...originalProps - All the component's original props
117
  
118
  // Measurement props injected by withContentRect:
119
  measureRef: function,      // Must be passed to the element you want to measure as its ref
120
  measure: function,         // Function to programmatically trigger measurement  
121
  contentRect: object,       // Object containing the current measurements
122
  
123
  // All Measure component props are also available:
124
  client: boolean,           // Optional - enable client measurements
125
  offset: boolean,           // Optional - enable offset measurements
126
  scroll: boolean,           // Optional - enable scroll measurements
127
  bounds: boolean,           // Optional - enable bounds measurements
128
  margin: boolean,           // Optional - enable margin measurements
129
  innerRef: object,          // Optional - ref to access internal element
130
  onResize: function         // Optional - callback when dimensions change
131
};
132
```
133

134
### Integration with Class Components
135

136
```javascript
137
import React, { Component } from 'react';
138
import { withContentRect } from 'react-measure';
139

140
class BaseComponent extends Component {
141
  render() {
142
    const { measureRef, contentRect, children } = this.props;
143
    const { width, height } = contentRect.bounds || { width: 0, height: 0 };
144
    
145
    return (
146
      <div ref={measureRef}>
147
        <p>Dimensions: {width} x {height}</p>
148
        {children}
149
      </div>
150
    );
151
  }
152
}
153

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

156
// Usage
157
<MeasuredComponent onResize={rect => console.log('Resized:', rect)}>
158
  <p>Content that will be measured</p>
159
</MeasuredComponent>
160
```
161

162
### Relationship to Measure Component
163

164
The Measure component is actually implemented using withContentRect:
165

166
```javascript
167
const Measure = withContentRect()(
168
  ({ measure, measureRef, contentRect, children }) =>
169
    children({ measure, measureRef, contentRect })
170
);
171
```
172

173
This means the wrapped component accepts all the same props as Measure and provides the same functionality, making withContentRect and Measure interchangeable depending on your preferred API style.