0
# Measure Component
1

2
The Measure component is the primary interface for measuring React components. It uses the render props pattern to provide measurement data to child components and handles ResizeObserver lifecycle management.
3

4
## Capabilities
5

6
### Measure Component
7

8
Wraps any child component and calculates its dimensions using ResizeObserver.
9

10
```javascript { .api }
11
/**
12
 * React component that provides element measurement capabilities via render props
13
 * @param {Object} props - Component props
14
 * @param {boolean} [props.client] - Include client measurements (clientTop, clientLeft, clientWidth, clientHeight)
15
 * @param {boolean} [props.offset] - Include offset measurements (offsetTop, offsetLeft, offsetWidth, offsetHeight)
16
 * @param {boolean} [props.scroll] - Include scroll measurements (scrollTop, scrollLeft, scrollWidth, scrollHeight)
17
 * @param {boolean} [props.bounds] - Include bounds measurements via getBoundingClientRect
18
 * @param {boolean} [props.margin] - Include margin measurements via getComputedStyle
19
 * @param {Object|Function} [props.innerRef] - Ref to access the internal component
20
 * @param {Function} [props.onResize] - Callback invoked when element dimensions change
21
 * @param {Function} props.children - Render prop function that receives measurement data
22
 * @returns {React.ReactElement}
23
 */
24
function Measure(props);
25

26
// Children render prop function receives object with:
27
// {
28
//   measureRef: function - Must be passed to the element you want to measure as its ref
29
//   measure: function - Function to programmatically trigger measurement
30
//   contentRect: object - Object containing the current measurements
31
// }
32
```
33

34
**Usage Examples:**
35

36
```javascript
37
import React, { Component } from 'react';
38
import Measure from 'react-measure';
39

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

44
  render() {
45
    return (
46
      <Measure
47
        bounds
48
        onResize={contentRect => {
49
          this.setState({ dimensions: contentRect.bounds });
50
        }}
51
      >
52
        {({ measureRef }) => (
53
          <div ref={measureRef}>
54
            Size: {this.state.dimensions.width} x {this.state.dimensions.height}
55
          </div>
56
        )}
57
      </Measure>
58
    );
59
  }
60
}
61

62
// Multiple measurement types
63
class MultiMeasureExample extends Component {
64
  render() {
65
    return (
66
      <Measure bounds scroll margin>
67
        {({ measureRef, contentRect }) => (
68
          <div ref={measureRef} style={{ padding: '20px', overflow: 'auto' }}>
69
            <pre>{JSON.stringify(contentRect, null, 2)}</pre>
70
          </div>
71
        )}
72
      </Measure>
73
    );
74
  }
75
}
76

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

81
  handleClick = () => {
82
    if (this.elementRef.current) {
83
      console.log('Direct access to element:', this.elementRef.current);
84
    }
85
  };
86

87
  render() {
88
    return (
89
      <Measure bounds innerRef={this.elementRef}>
90
        {({ measureRef }) => (
91
          <div ref={measureRef} onClick={this.handleClick}>
92
            Click me to log element to console
93
          </div>
94
        )}
95
      </Measure>
96
    );
97
  }
98
}
99
```
100

101
### Measurement Types
102

103
Each measurement type enables different DOM properties to be included in the contentRect.
104

105
#### Client Measurements
106

107
```javascript { .api }
108
/**
109
 * Include client measurements in contentRect.client
110
 * @param {boolean} client - When true, includes clientTop, clientLeft, clientWidth, clientHeight
111
 */
112
client: true
113
```
114

115
Includes: `clientTop`, `clientLeft`, `clientWidth`, `clientHeight`
116

117
#### Offset Measurements
118

119
```javascript { .api }
120
/**
121
 * Include offset measurements in contentRect.offset
122
 * @param {boolean} offset - When true, includes offsetTop, offsetLeft, offsetWidth, offsetHeight
123
 */
124
offset: true
125
```
126

127
Includes: `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`
128

129
#### Scroll Measurements
130

131
```javascript { .api }
132
/**
133
 * Include scroll measurements in contentRect.scroll
134
 * @param {boolean} scroll - When true, includes scrollTop, scrollLeft, scrollWidth, scrollHeight
135
 */
136
scroll: true
137
```
138

139
Includes: `scrollTop`, `scrollLeft`, `scrollWidth`, `scrollHeight`
140

141
#### Bounds Measurements
142

143
```javascript { .api }
144
/**
145
 * Include bounds measurements in contentRect.bounds
146
 * @param {boolean} bounds - When true, uses getBoundingClientRect()
147
 */
148
bounds: true
149
```
150

151
Uses `getBoundingClientRect()` to include: `top`, `right`, `bottom`, `left`, `width`, `height`
152

153
#### Margin Measurements
154

155
```javascript { .api }
156
/**
157
 * Include margin measurements in contentRect.margin
158
 * @param {boolean} margin - When true, uses getComputedStyle() for margins
159
 */
160
margin: true
161
```
162

163
Uses `getComputedStyle()` to include computed margins: `top`, `right`, `bottom`, `left`
164

165
### Lifecycle and Performance
166

167
The Measure component automatically:
168

169
- Creates a ResizeObserver instance on mount
170
- Observes the measured element when measureRef is attached
171
- Calls onResize twice on mount (once from componentDidMount, once from ResizeObserver)
172
- Uses requestAnimationFrame to batch DOM updates for performance
173
- Cleans up ResizeObserver on unmount
174
- Handles ref changes by unobserving old elements and observing new ones