Material-ui: How to measure height of a Material-UI component?

[jvskriubakken]

React website hava written this about how to measure dom nodes: https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

I cannot get that to work with a dom node created by material ui. I get the error "getBoundingClientRect is not a function" on the given node.

How is it possible to access the dom node created by material ui so that it can be measured. Like it would like the measure the height of the element.

Thanks!

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[joshwooding]

With v4 you can access the ref of our components’ root nodes by using the ref prop. Then you can call getBoundingClientRect on it

[mbrookes]

https://codesandbox.io/s/q337wlq9oq

[mbrookes]

@eps1lon Different cause, but same error as #15664 / #10717 when using the above Codesandbox with Button rather than Paper:

import React from "react";
import Button from "@material-ui/core/Button";

function MeasureExample() {
  const [rect, ref] = useClientRect();

  return (
    <React.Fragment>
      <Button ref={ref}>
        Button
      </Button>
      {rect !== null && (
        <h2>The above Button is {Math.round(rect.height)}px tall</h2>
      )}
    </React.Fragment>
  );
}

function useClientRect() {
  const [rect, setRect] = React.useState(null);
  const ref = React.useCallback(node => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

export default MeasureExample;

[eps1lon]

@jvskriubakken How can I access the DOM element? is explained in our docs as well. If this isn't working then it's a bug. Could you provide a reproduction?

@mbrookes Bit confused why I was pinged?

[mbrookes]

Bit confused why I was pinged?

@eps1lon Different cause, but same error as #15664 / #10717 when using the above Codesandbox with Button rather than Paper.

[eps1lon]

I don't think #15664 has the same underlying issue.

The problem with the codesandbox is that it uses an object. Not sure how BoundingRect is implemented but if you only save rect.height in the state it works.

[mbrookes]

I don't think #15664 has the same underlying issue.

Neither did I ("Different cause"), it was just curious to see the same React error in the space of a few issues, and wondered why the code @jvskriubakken linked to (in the React docs, no less) works with Paper but not with Button. Since you were looking into the other issue, I thought you might have some idea of the sorts of things that can trigger that error.

Good to know it works with a workaround at least. Thanks for looking at it.

[oliviertassinari]

It's working fine with a Button:

import React from "react";
import { Button } from "@material-ui/core";

export default function MeasureExample() {
  const [height, setHeight] = React.useState(0);

  const measuredRef = React.useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <Button ref={measuredRef}>Hello, world</Button>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

https://codesandbox.io/s/material-demo-1frpm

[mbrookes]

Hard to see with a cross-origin error, but: https://codesandbox.io/s/d7lf1

This is the working Paper example with Button substituted. Anyway, if you got it working, that's good enough for me.