Harnesses the power of ResizeObservers, a feature in modern browsers that can detect when elements change size. useResizeDetector hook makes it easy to manage these size changes within React applications, ensuring smooth and responsive user experiences.
useResizeDetector
npm install react-resize-detector
ResizeObserver provides different box models to measure the size of an element. By default border and padding are not included in the size. You can use the box option to change this behavior.
box
Hover to visualize card's border / padding / inner content with a different color
Uses lodash to limit the amount of times the resize event can be fired per second. It's useful to prevent unnecessary re-renders when the user is resizing the window.- Throttle docs- Debounce docs
If you only need to detect changes in one axis, you can disable the other axis to improve performance.
useResizeDetector hook supports conditional rendering and will automatically detect ref changes.
ref
Width: px, Height: px
px