What's Changed
⚠️ Migration guide
- The
onResize
function now receives a single object. Destructurewidth
andheight
parameters as follows:
- onResize: (width, height) => {
+ onResize: ({ width, height, entry }) => {
if (width && height) {
...
}
}
When the element is mounted, width
and height
will always be numbers. When unmounted, they will be null
.
Ensure to add null checks before accessing element dimensions to address TypeScript errors.
Note that entry
, a ResizeObserverEntry triggered by ResizeObserver
, is now accessible. This provides access to borderBoxSize
, contentBoxSize
, and target
, useful for custom logic or calculating border/padding size.
Refer to the ResizeObserverEntry documentation.
-
If
observerOptions.box
is set toborder-box
, the returnedwidth
andheight
from theuseResizeDetector
hook will include the padding and border size of the element. Default behavior remains unchanged - padding and border size are not included. -
Rename
ReactResizeDetectorDimensions
toDimensions
- import type { ReactResizeDetectorDimensions } from "react-resize-detector/build/types/types"
+ import type { Dimensions } from "react-resize-detector"
Full Changelog: v10.0.0...v11.0.0