react-resize-observer-hook 
ResizeObserver + React hooks
Demo
zzarcon.github.io/react-resize-observer-hook
Install
yarn add react-resize-observer-hook
Usage
import {useState, useRef} from 'react';
import useResize from 'react-resize-observer-hook';
export default () => {
const [dimensions, setDimensions] = useState({width: 100, height: 50})
const parentRef = useRef(null);
useResizeObserver(parentRef, (entry) => setDimensions({
width: entry.width,
height: entry.height,
}));
return (
<div ref={parentRef}>
{dimensions.width} x {dimensions.height}
</div>
)
}API
DOMRectReadOnly {
bottom: number;
height: number;
left: number;
right: number;
top: number;
width: number;
x: number;
y: number;
toJSON(): any;
}
ObserverCallback = (entry: DOMRectReadOnly) => void;
useResizeObserver = (ref: RefObject<HTMLElement>, callback: ObserverCallback) => {