streamich/react-use

`useMeasure` on SVG

開放

#730 建立於 2019年11月1日

 (3 則留言) (1 個反應) (1 位負責人)TypeScript (3,273 個分叉)batch import
help wanted

倉庫指標

星標
 (43,979 顆星)
PR 合併指標
 (PR 指標待抓取)

描述

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.

貢獻者指南