useMeasure does not return Coordinates of SVGGraphicsElements

[dnlfrst]

What is the current behavior?

Currently, useMeasure does not return the correct coordinates of an SVGGraphicsElement. In this MWE, useMeasure returns:

{ x: 0, y: 0, width: 50, height: 50, top: 0, left: 0, bottom: 0, right: 0 }

whereas getBBox() returns

{ x: 10, y: 10, width: 50, height: 50 }

for

<svg>
      <rect
        height={50}
        id="rectangle"
        ref={rectangle}
        width={50}
        x={10}
        y={10}
      />
</svg>

What is the expected behavior?

I would expect useMeasure to return a bounding box with the attributes x and y set to 10 as in the result of getBBox().

A little about versions:

• OS: macOS Big Sur 11.2.3
• Browser (vendor and version): Google Chrome 89.0.4389.114
• React: 17.0.2
• react-use: 17.2.3
• Did this worked in the previous package version? Not that I am aware of.

[JoeDuncko]

Hi all! @react-hookz/web, the new library by one of react-use's former maintainers (background here and here) has a new implementation of useMeasure that I think solves this.

For those interested, there's an official migration guide for migrating from react-use to @react-hookz/web.

Hope this helps!