useMeasure on SVG

[skipjack]

What is the current behavior?

The useMeasure hook doesn't work on an <svg /> element.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

const Example = props => {
    const [ref, { width, height }] = useMeasure()
    console.log(width, height)
    return (
        <svg
            ref={ ref }
            className={ className }
            style={{ width: 200, height: 200 }}
        >
            { children }
        </svg>
    )
}

What is the expected behavior?

The width and height would be populated with the correct values. Changing the example to a <div> works. Giving it a little more thought and looking at MDN I'm realizing this might be more of a feature request. I assumed it wouldn't work for svg children but thought the top-level element was a normal HTML node.

A little about versions:

• OS: macOS 10.14.6
• Browser (vendor and version): Chrome
• React: 16.11.0
• react-use: 12.13.0
• Did this worked in the previous package version? Idk, first time using react-use.

[skipjack]

Per my note in the expected behavior section, maybe the "fix" for now is just to update the useMeasure docs and then getting this to work for an <svg> would be a separate feature request. I'd be happy to submit a PR for either, just wanted to gather some thoughts first.

[streamich]

@skipjack updating the docs and then making useMeasure work in separate PR for <svg> sounds great.

[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!