Handle element resizes like it's 2018!
Nowadays browsers start supporting element resize handling natively using ResizeObserver. And we use this feature (with polyfill) to help you handle element resizes in React.
⚠️ This change intriduced in v.2.0.0
For older implementations please checkout this branch v.1.1.0
Demo
Live demo
Local demo:
git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/examples
npm i && npm start
Installation
npm i react-resize-detector
// OR
yarn add react-resize-detector
Example
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'));
API
onResize
(Func) Function that will be invoked with width
and height
arguments.
handleWidth
(Bool) Trigger onResize
on width change. Default: false
.
handleHeight
(Bool) Trigger onResize
on height change. Default: false
.
skipOnMount
(Bool) Do not trigger onResize when a component mounts. Default: false
.
resizableElementId
(String) Id of the element we want to observe. If no one provided, parentElement of the component will be used. Default: ``.
refreshMode
(String) Possible values: throttle
and debounce
See lodash docs for more information. Default: undefined
- means that callback will be fired as often as ResizeObserver allows
refreshRate
(Number) Makes sense only when refreshMode
is set. Default: 1000
. Important! It's numeric prop so set it correctly, e.g. refreshRate={500}
License
MIT