streamich/react-use

`useMeasure` on SVG

Open

#730 geöffnet am 1. Nov. 2019

Auf GitHub ansehen
 (3 Kommentare) (1 Reaktion) (1 zugewiesene Person)TypeScript (3.273 Forks)batch import
help wanted

Repository-Metriken

Stars
 (43.979 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 1743T 9h) (1 gemergte PR in 30 T)

Beschreibung

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.

Contributor Guide