React Resize Listener
npm i react-resize-listener
This component uses an
<iframe /> component under the hood that is positioned absolutely to fill a container to listen for resize events on its
Be sure to set
position: relative; on the parent container that you want to listen on, and be aware of any other positioned containers that might be in between.
You can add
debug to the
ResizeListener component to show an outline around the resize listener container, and it will automatically
console.log() every time the
onResize event fires. This can be useful if you aren't sure whether the listener is filling the container you think it is.
import React Component from "react";import ResizeListener from "react-resize-listener";const ResizableComponent = props<div ="might-resize" =><p>This container might resize for whatever reason andwe might want to know when it does and the dimensionswhen it does</p><ResizeListener = /></div>