Nowadays browsers have started to support element resize handling natively using ResizeObservers. We use this feature (with a polyfill) to help you handle element resizes in React.
Local demo:
git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/examples
npm i && npm start
npm i react-resize-detector
// OR
yarn add react-resize-detector
import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';
class App extends PureComponent {
render() {
return (
<div>
...
<ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
</div>
);
}
onResize = () => {
...
}
}
render(<App />, document.getElementById('root'));
<ReactResizeDetector handleWidth handleHeight>
{({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>
const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
// ...
<ReactResizeDetector handleWidth handleHeight>
<CustomComponent />
</ReactResizeDetector>;
import { withResizeDetector } from 'react-resize-detector';
const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
export default withResizeDetector(CustomComponent);
<ResizeDetector
handleWidth
handleHeight
render={({ width, height }) => (
<div>
Width:{width}, Height:{height}
</div>
)}
/>
Prop | Type | Description | Default |
---|---|---|---|
onResize | Func | Function that will be invoked with width and height arguments |
undefined |
handleWidth | Bool | Trigger onResize on width change |
false |
handleHeight | Bool | Trigger onResize on height change |
false |
skipOnMount | Bool | Do not trigger onResize when a component mounts | false |
refreshMode | String | Possible values: throttle and debounce See lodash docs for more information. undefined - callback will be fired for every frame |
undefined |
refreshRate | Number | Use this in conjunction with refreshMode . Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500} |
1000 |
refreshOptions | Object | Use this in conjunction with refreshMode . An object in shape of { leading: bool, trailing: bool } . Please refer to lodash's docs for more info |
undefined |
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 | undefined |
nodeType | node | Valid only for a 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 |
MIT