support for SVG elements

[khusamov]

Will there be support for SVG elements or not?

Now the error appears. Since the SVG element is not compatible with the HTML element.

TS2322: Type '(instance: HTMLElement | null) => void' is not assignable to type 'LegacyRef<SVGSVGElement>'.   
Type '(instance: HTMLElement | null) => void' is not assignable to type '(instance: SVGSVGElement | null) => void'.     
Types of parameters 'instance' and 'instance' are incompatible.       
Type 'SVGSVGElement | null' is not assignable to type 'HTMLElement | null'.         
Type 'SVGSVGElement' is missing the following properties from type 'HTMLElement': 
accessKey, accessKeyLabel, autocapitalize, dir, and 19 more.

[ZeeCoder]

Seems like the TS types will need to change from using HTMLElement to simply Element, as ResizeObserver itself can observe any Element.

[github-actions[bot]]

🎉 This issue has been resolved in version 9.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[khusamov]

Thank you very much!

[khusamov]

I checked working with SVG. Does not work. The height variable is always zero.

[ZeeCoder]

I checked working with SVG. Does not work. The height variable is always zero.

Could you please provide reproduction in codesandbox?
it would be even better if you could check using raw ResizeObserver first, as it's known to be a bit quirky with svgs.

[khusamov]

https://codesandbox.io/s/use-resize-observer-hsxycd?file=/src/App.tsx

It is required to display a square in the middle of the browser. But instead of the browser dimensions, the dimensions of the square are substituted in height, width.

[ZeeCoder]

Here's a slightly modified version of that sandbox:
https://codesandbox.io/s/use-resize-observer-forked-29q3fg?file=/src/App.tsx

As you can see the hook reports the same exact values that a raw ResizeObserver reports, so I see no issues with the hook based on this example.

[khusamov]

Why doesn't it return the dimensions of the SVG container?

[ZeeCoder]

Not 100% sure, the ResizeObserver spec around SVGs is a bit weird.

Here's some stuff I found, hope it helps:

• fix: useMeasure type definitions for SVG streamich/react-use#1745
• Change interaction of svg elements with css layout boxes juggle/resize-observer#72
• SVG elements are not observable WICG/resize-observer#9
• [resize-observer] svg interaction w3c/csswg-drafts#4032
• How should ResizeObserver work for SVG layout elements? w3c/svgwg#713

Also I wonder if you could just wrap your SVG in a div and measure that instead?
Might help you depending on your exact use-case.

[khusamov]

Thanks for the answer! Yes, I wrapped it in a div block