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