1# Handle element resizes like it's 2019!
2
3Nowadays browsers have started to support element resize handling natively using [ResizeObservers](https://wicg.github.io/ResizeObserver/). We use this feature (with a [polyfill](https://github.com/que-etc/resize-observer-polyfill)) to help you handle element resizes in React.
4
5## Demo
6
7#### [Live demo](http://maslianok.github.io/react-resize-detector/)
8
9Local demo:
10
11```
12git clone https://github.com/maslianok/react-resize-detector.git
13cd react-resize-detector/examples
14npm i && npm start
15```
16
17## Installation
18
19```
20npm i react-resize-detector
21// OR
22yarn add react-resize-detector
23```
24
25## Examples
26
27#### 1. Callback Pattern
28
29```jsx
30import React, { PureComponent } from 'react';
31import { render } from 'react-dom';
32import ReactResizeDetector from 'react-resize-detector';
33
34class App extends PureComponent {
35  render() {
36    return (
37      <div>
38        ...
39        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
40      </div>
41    );
42  }
43
44  onResize = () => {
45    ...
46  }
47}
48
49render(<App />, document.getElementById('root'));
50```
51
52#### 2. Child Function Pattern
53
54```jsx
55<ReactResizeDetector handleWidth handleHeight>
56  {({ width, height }) => <div>{`${width}x${height}`}</div>}
57</ReactResizeDetector>
58```
59
60#### 3. Child Component Pattern
61
62```jsx
63const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
64
65// ...
66
67<ReactResizeDetector handleWidth handleHeight>
68  <CustomComponent />
69</ReactResizeDetector>;
70```
71
72#### 4. HOC pattern
73
74```jsx
75import { withResizeDetector } from 'react-resize-detector';
76
77const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
78
79export default withResizeDetector(CustomComponent);
80```
81
82#### 5. Render prop pattern
83
84```jsx
85<ResizeDetector
86  handleWidth
87  handleHeight
88  render={({ width, height }) => (
89    <div>
90      Width:{width}, Height:{height}
91    </div>
92  )}
93/>
94```
95
96## API
97
98| Prop           | Type        | Description                                                                                                                                                                                                                                                                                                              | Default     |
99| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
100| onResize       | Func        | Function that will be invoked with `width` and `height` arguments                                                                                                                                                                                                                                                        | `undefined` |
101| handleWidth    | Bool        | Trigger `onResize` on width change                                                                                                                                                                                                                                                                                       | `false`     |
102| handleHeight   | Bool        | Trigger `onResize` on height change                                                                                                                                                                                                                                                                                      | `false`     |
103| skipOnMount    | Bool        | Do not trigger onResize when a component mounts                                                                                                                                                                                                                                                                          | `false`     |
104| refreshMode    | String      | Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. `undefined` - callback will be fired for every frame                                                                                                                                                | `undefined` |
105| refreshRate    | Number      | Use this in conjunction with `refreshMode`. Important! It's a numeric prop so set it accordingly, e.g. `refreshRate={500}`                                                                                                                                                                                               | `1000`      |
106| refreshOptions | Object      | Use this in conjunction with `refreshMode`. An object in shape of `{ leading: bool, trailing: bool }`. Please refer to [lodash's docs](https://lodash.com/docs/4.17.11#throttle) for more info                                                                                                                           | `undefined` |
107| querySelector  | String      | A selector of an element to observe. You can use this property to attach resize-observer to any DOM element. Please refer to the [querySelector docs](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)                                                                                           | `undefined` |
108| targetDomEl    | DOM element | A DOM element to observe. By default it's a parent element in relation to the ReactResizeDetector component. But you can pass any DOM element to observe. This property is omitted when you pass `querySelector`                                                                                                         | `undefined` |
109| nodeType       | node        | Valid only for a [callback-pattern](https://github.com/maslianok/react-resize-detector#1-callback-pattern). Ignored for other render types. Set resize-detector's node type. You can pass any valid React node: string with node's name or element. Can be useful when you need to handle table's or paragraph's resizes | `div`       |
110
111## License
112
113MIT
114