search

ZeeCoder / use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.
MIT License
651 stars 42 forks source link

Use getBoundingClientRect instead/addition of contentRect #9

Closed FokkeZB closed 5 years ago

FokkeZB commented 5 years ago

Currently, contentRect is used, which doesn't include the element's padding and border.

Changing this would be a breaking change, so perhaps we could mix in rectWidth, rectHeight or even all of the getBoundingClientRect dimensions?

See https://github.com/Swizec/useDimensions/blob/master/src/index.js#L3-L20

FokkeZB commented 5 years ago

On second thought; I guess we can't rely on ResizeObserver to always detect changes to the bounding rect as it per spec watches for changes to the content rect:

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

The ResizeObserver interface reports changes to the content rectangle of an Element or the bounding box of an SVGElement. The content rectangle is the box in which content can be placed, meaning the border box minus the padding.