Support getBoundingClientRect()

[ivanjeremic]

The returned width and height should also be also available as what we get from el.getBoundingClientRect().width & el.getBoundingClientRect().height sometimes we need exact sitze and i didn't see anything in the Readme that this library supports that already, please correct me if I'm wrong.

[ZeeCoder]

Not sure what you mean by "exact size". ResizeObservers support some box options now, maybe that's what you need?

This library is intentionally resisting such feature and aims to be thin hook to use ResizeObserver as-is,
so this will definitely not be supported out of the box.

Features like these can be implemented in composing hooks easily: see throttle / debounce and breakpoint examples in the readme.

Also, getBoundingClientRect is one of the calls you can make in JS land that causes layout trashing, avoiding which is one of the main selling points of using the native ResizeObserver.

What I could do, however, is giving easy access to the observed element in the onResize callback, so that you can compose the hook and add this feature yourself.

Pseudo-code:

const useBoundingClientRect = () => {
  const [size, setSize] = useState({ width: undefined, height: undefined });
  const { ref } = useResizeObserver({
    onResize: useMemo(({ element }) => {
      const { width, height } = element.getBoundingClientRect(); // This trashes the layout
      setSize({ width, height });
    }),
  });

  return { ...size, ref };
};

I would probably combine this with throttling, to lessen the effects of layout trashing.

This is already possible btw, you just don't have such an easy access to the element rn.

[ivanjeremic]

Not sure what you mean by "exact size". ResizeObservers support some box options now, maybe that's what you need?

Thanks, I was thinking maybe this library will go in the direction like Solid.js primitive https://www.npmjs.com/package/@solid-primitives/resize-observer but totally ok if not, this is now solved for me and can be closed. Thanks

[ZeeCoder]

I can't see any instances of that lib using getBoundingClientRect either.

[ivanjeremic]

I can't see any instances of that lib using getBoundingClientRect either.

I know but it goes in a direction where it is very likely they will.

[ZeeCoder]

Got it 👍

[bpinto]

@ZeeCoder I tried your snippet but that didn't work. You closed this issue as completed, but I think I missed the change related to this. How can I obtain the element?

[ZeeCoder]

It was closed, nothing was done, that snippet was only a potential implementation.
You should have access to the element already though, as you'd need to pass it in either as a ref object or call the callback ref with it.

I'd advise against using getBoundingClientRect though, and use the box option instead if possible.

[bpinto]

I'd advise against using getBoundingClientRect though, and use the box option instead if possible.

I understand the concerns but some information can only be obtained from getBoundingClientRect as it returns more than width and height. I read somewhere, I think, that you don't want to return more than just those two attributes regardless of what's available, right?

You should have access to the element already though, as you'd need to pass it in either as a ref object or call the callback ref with it.

👍 that's fine, just wondering if that was available and I was missing something. I tried both merging ref or passing in a ref and both worked to get the element. 👍

[ZeeCoder]

@bpinto to be precise I won't return anything that's not what ResizeObserver gives you, which currently only width/height.
If I used getBoundingClientRect to return more things it would A) go against the philosophy of this hook being minimal to be as composable as possible (feature creep), and B) it would mean that you lose the benefit of ResizeObserver reporting size changes before layout / paint.

Getting the element through onResize does not go against either of those though, and I can see implementing something like this being a bit of a pain, so I'll change this issue to a discussion instead.
Could be part of a future minor release.

[bpinto]

@bpinto to be precise I won't return anything that's not what ResizeObserver gives you, which currently only width/height.

I believe that's accurate for all entries, except for the deprecated contentRect which returns a DOMRectReadOnly object that contains much of the same properties as getBoundingClientRect except, if I'm not mistaken, it uses the Content Box instead of the Border Box.

If I used getBoundingClientRect to return more things it would A) go against the philosophy of this hook being minimal to be as composable as possible (feature creep), and B) it would mean that you lose the benefit of ResizeObserver reporting size changes before layout / paint.

👍 Sorry, I didn't mean to say that the library should execute getBoundingClientRect and return its value, but that when using contentRect we have access to the same properties (but with a different box model, as said above) as when executing a getBoundingClientRect. But I understand the preference for supporting width/height only.

Could be part of a future minor release.

😍