v11.0.0
What's Changed
⚠️ Migration guide
- The
onResizefunction now receives a single object. Destructurewidthandheightparameters 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.boxis set toborder-box, the returnedwidthandheightfrom theuseResizeDetectorhook will include the padding and border size of the element. Default behavior remains unchanged - padding and border size are not included. -
Rename
ReactResizeDetectorDimensionstoDimensions
- 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