streamich/react-use

`useMeasure` on SVG

Open

#730 opened on Nov 1, 2019

View on GitHub
 (3 comments) (1 reaction) (1 assignee)TypeScript (43,979 stars) (3,273 forks)batch import
help wanted

Description

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

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React hooksSVG element basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the implementation of `useMeasure` in `react use` (likely in `src/useMeasure.ts`). The hook likely uses `ResizeObserver` or `getBoundingClientRect()`. Determine if SVG elements support these APIs. Test if wrapping the SVG in a `<div>` and measuring the div works, or if the hook needs to handle `SVGGraphicsElement` (which has `getBBox()` instead). Check MDN for SVG element measurement and consider adding a fallback for SVG elements.