jaredLunde/react-hook

useResizeObserver should observe `top`

alicerocheman opened this issue · 1 comments

Is your feature request related to a problem? Please describe.
I'm using the useResizeObserver to detect when various size properties change, including top.
For now, my useResizeObserver does not detect changes on top, so I don't get the final top value (once other components have settled)

Describe the solution you'd like
that useResizeObserver detects changes in the whole DOMRect, including top

Describe alternatives you've considered
For now, I have to avoid lazy loading so that all (actually most, all is impossible) components render at their final height. This is not a maintainable solution, and it doesn't always work. (some components have to wait for data before they size themselves)

Additional context
My use case:
I have many sections in my page.
I have a sticky on the right of the page, that should stay sticky until it reaches the top of Section12.
Section12's top is observed and stored
the sticky's container's height is defined using Section12's top value

My issue:
Section11 depends on remote data, so at first it's only a few px high. Then it takes about 900px.
Section12's top value computed with useResizeObserver is not updated when Section11 changes height (which changes the topvalue of Section12)

This hook is using the browser's ResizeObserver so if it's not detecting changes to top, that's on the spec.