ResizeObserver Hook for React
The purpose of the hook is to make using ResizeObserver simpler with React.
Install
npm install --save simple-resize-observer-hook
API
function MyComponent() { const ref = useRef(null); // current is the ref object. // entries is an array of ResizeObserverEntry objects. const {current, entries} = useResizeObserver(ref); const [width, setWidth] = useState(10); const offsetWidth = current ? current.offsetWidth : 0; console.log(offsetWidth, entries) return <> <input style={{width: `${width}px`}} type="text" value="This is being observed" ref={ref}/> <br/> <button onClick={() => setWidth(width + 10)}>Add Width</button> <p>The offsetWidth is {offsetWidth}</p> </>}
You need to pass a ref object as an argument to the hook. The ref is the object that is being observed.
The hook returns an object that has two properties:
current
The React ref object.
entries
An array of ResizeObserverEntry objects.