streamich/react-use

`useMeasure` on SVG

Open

#730 aperta il 1 nov 2019

Vedi su GitHub
 (3 commenti) (1 reazione) (1 assegnatario)TypeScript (3273 fork)batch import
help wanted

Metriche repository

Star
 (43.979 star)
Metriche merge PR
 (Merge medio 1743g 9h) (1 PR mergiata in 30 g)

Descrizione

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.

Guida contributor