ResizeObserver component for React.
Get notifications when an in the page changes its size.
The change in size can have any source - layout changes, DOM changes, browser resize - etc. The source is not important.
The ResizeObserver
API is a performant way of getting updates on size changes.
$ npm install @rb/resize-observer --save
# or
$ yarn add @rb/resize-observer
This component can be nested inside any parent component, and will notify when the node of the parent component changes its size.
import React from 'react';
import { render } from 'react-dom';
import ResizeObserver from '@rb/resize-observer';
const App = () => {
return (
<div style={{ width: '50vw', border: '1px solid red' }}>
This element has width: 50vw, so resize the browser window to get
notifications in the console
<ResizeObserver
onResize={({ width, height }) => {
console.log({ width, height });
}}
/>
</div>
);
};
render(<App />, document.getElementById('root'));
onResize: (contentRect)
- you can specify anonResize
function prop, which will be called with thecontentRect
passed by the nativeResizeObserver
API. You can destructure this to{width, height}