30

I'm creating a component and I need to get it's parent <div> width and height. I'm using Hooks, so all my components are functions. I've read some examples using classes, but this won't apply to my component.

So I have this component:

export default function PlantationMap(props) {
    <div className="stage-canvas">
        <Stage
          width={window.innerWidth * 0.5}
          height={window.innerHeight * 0.5}
          onWheel={handleWheel}
          scaleX={stage.stageScale}
          scaleY={stage.stageScale}
          x={stage.stageX}
          y={stage.stageY}
          draggable
        / >
    </div>
}

How could I get the <div> height and width to use in <Stage width={} height={} />?

Thank you very much in advance

Edit: I tried using the useRef() hook, like this:

const div = useRef();

return (
  <div ref={div}>
  ...
  </div>
)

But I can't access the div.current object

2
  • Why you don't use css in separate file/class and apply it here to follow separation of concerns? Its can be easier for you to mainening your code. Oct 3, 2019 at 15:26
  • Because it's responsive. So I want to get the current width and height of the mounted component Oct 3, 2019 at 15:28

7 Answers 7

21

I think useCallback is what you want to use so you can get the width and height when it changes.

  const [height, setHeight] = useState(null);
  const [width, setWidth] = useState(null);
  const div = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
      setWidth(node.getBoundingClientRect().width);
    }
  }, []);

  return (
    <div ref={div}>
    ...
    </div>
  )
6
  • Although your approach is good, I could solve the problem using useEffect. The ref was trying to set the width and height before the div mounted, so this caused the problem. Thanks anyway Oct 3, 2019 at 16:33
  • Oh yeah! Gotcha... I got hung up on the ref with the div example and forgot the part about you passing window.xxx to Stage. Oct 3, 2019 at 16:53
  • I am curious though without being able to see the Stage component, are you sure what you're trying to do can't be handled with css and media queries instead of putting the overhead of this on JavaScript? Oct 3, 2019 at 16:56
  • 1
    I'm not sure, but I don't think so. <Stage> is a react-konva element that renders a canvas. I don't think I can set it using css Oct 3, 2019 at 18:47
  • Gotcha... wasn't sure if it was a homemade component or not. Oct 4, 2019 at 19:37
13

Declare a reference using useRef hook and then read current.offsetHeight and current.offsetWidth properties.

Here is the code:

import React, { useEffect, useRef } from 'react';

const PlantationMap = (props) => {

    const stageCanvasRef = useRef(null);

    // useEffect will run on stageCanvasRef value assignment
    useEffect( () => {

        // The 'current' property contains info of the reference:
        // align, title, ... , width, height, etc.
        if(stageCanvasRef.current){

            let height = stageCanvasRef.current.offsetHeight;
            let width  = stageCanvasRef.current.offsetWidth;
        }

    }, [stageCanvasRef]);

    return(
        <div className = "stage-canvas" ref = {stageCanvasRef}>
            <Stage
              width={window.innerWidth * 0.5}
              height={window.innerHeight * 0.5}
              onWheel={handleWheel}
              scaleX={stage.stageScale}
              scaleY={stage.stageScale}
              x={stage.stageX}
              y={stage.stageY}
              draggable
            / >
        </div>);

}

export default PlantationMap;
5
  • Is this sample going to render with incorrect size at first and then immediately rerender with correct size? May 29, 2021 at 23:59
  • On the first render, stageCanvasRef.current may be empty, so you will access the height and width on the second render (or on any rerender after it). But anyway, the sample isn't modifying the size of the element, just accessing its properties. May 31, 2021 at 19:36
  • 1
    When I try this in my TypeScript React Native app, I get this error: Property 'offsetWidth' does not exist on type 'never'. Oct 6, 2021 at 0:04
  • Add <any> to useRef definition, as stated in this answer stackoverflow.com/a/61475517/7417863 Mar 5, 2022 at 16:06
  • This approach gives me 0 back when the website is first initiated, so the answer with the resizeObserver down below did it for me
    – User9132
    Mar 29 at 16:55
13

You can make use of the built-in ResizeObserver:

export default function PlantationMap(props) {
    const [width, setWidth] = useState(100);
    const [height, setHeight] = useState(100);

    useEffect(() => {
        const resizeObserver = new ResizeObserver((event) => {
            // Depending on the layout, you may need to swap inlineSize with blockSize
            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize
            setWidth(event[0].contentBoxSize[0].inlineSize);
            setHeight(event[0].contentBoxSize[0].blockSize);
        });

        resizeObserver.observe(document.getElementById("div1"));
    });

    return (
        <div id="div1" className="stage-canvas">
            <Stage
                width={width * 0.5}
                height={height * 0.5}
                onWheel={handleWheel}
                scaleX={stage.stageScale}
                scaleY={stage.stageScale}
                x={stage.stageX}
                y={stage.stageY}
                draggable
            / >
        </div>
    );
}
4
  • very nice solution deserves the likes!
    – Mohamed
    Nov 18, 2022 at 2:22
  • Loved this solution, just what I needed. Thanks!
    – Lalit
    Jan 6 at 12:40
  • 3
    This solution creates a new ResizeObserver every time this component is rendered. You need to add a dependency array to useEffect(). Also, you need to disconnect the ResizeObserver in the cleanup callback of the effect.
    – Phil Kang
    Feb 3 at 3:47
  • 1
    I advise not to use document.getElementById(), because if you have multiple components you will have the same id multiple times. Instead i used a ref on the parent div and then called ref.current.getElementByClassName("yourComponentClassName")[0] this is a more failsafe approach, that never reaches outside of the actual component
    – User9132
    Mar 29 at 17:03
4

I think ResizeObserver is the way to go as mentioned in the answer from Dan. I just wouldn't use the document.getElementById. Either use useMeasure from react-use or create everything on your own.

There are two scenarios:

  1. Component contains the container that you'd like to observe
  2. Component is a child component and doesn't have the container reference

To 1 - Reference directly accessible

In this case, you can create the reference with useRef in the component and use it at resizeObserver.observe(demoRef.current).

import "./styles.css";
import React, { useEffect, useRef, useState } from "react";

const DisplaySize = ({ width, height }) => (
  <div className="centered">
    <h1>
      {width.toFixed(0)}x{height.toFixed(0)}
    </h1>
  </div>
);

const Demo = () => {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  const demoRef = useRef();

  useEffect(() => {
    const resizeObserver = new ResizeObserver((event) => {
      // Depending on the layout, you may need to swap inlineSize with blockSize
      // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize
      setWidth(event[0].contentBoxSize[0].inlineSize);
      setHeight(event[0].contentBoxSize[0].blockSize);
    });

    if (demoRef) {
      resizeObserver.observe(demoRef.current);
    }
  }, [demoRef]);

  return (
    <div ref={demoRef} className="App">
      <DisplaySize width={width} height={height} />
    </div>
  );
}; //);

export default function App() {
  return <Demo />;
}

To 2 - Reference of container not directly accessible:

This case is probably happening more often and requires slightly more code. You need to pass the reference from the parent to the child component with React.forwardRef.

Demo code can be found below or in the following Codesandbox

Some words to the code:

  • In the parent component you create a reference with const containerRef = useRef() and use it at the main container with <div ref={containerRef}/>. Under the hood it will do something like ref => containerRef.current=ref
  • Next, pass the reference to the Demo component.

Why not use React.createRef?

That would work too but it would recreate the reference on every render of your App. Please have a look here for an explanation of the difference between useRef and createRef.

In short, use useRef with functional components and use createRef with class-based components.

const {useEffect, useRef, useState} = React;

const DisplaySize = ({ width, height }) => (
  <div className="centered">
    <h1>
      {width.toFixed(0)}x{height.toFixed(0)}
    </h1>
  </div>
);

const Demo = React.forwardRef((props, ref) => {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  useEffect(() => {
    
    const resizeObserver = new ResizeObserver((event) => {
      // Depending on the layout, you may need to swap inlineSize with blockSize
      // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize
      setWidth(event[0].contentBoxSize[0].inlineSize);
      setHeight(event[0].contentBoxSize[0].blockSize);
    });

    if (ref && ref.current) {
      resizeObserver.observe(ref.current);
    }
  }, [ref]);

  return <DisplaySize width={width} height={height} />;
});

function App() {
  const containerRef = useRef();
  return (
    <div ref={containerRef} className="App">
      <Demo ref={containerRef} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
}

.App {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  text-align: center;
  border: 4px solid red;
}

.centered {
  display: flex; /* establish flex container */
  flex-direction: column; /* make main axis vertical */
  justify-content: center; /* center items vertically, in this case */
  align-items: center; /* center items horizontally, in this case */
  height: 100%;
}
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>


<div id="root"></div>

Library React-use

There are also some useful hooks in React-use that could help here.

useWindowSize and useSize look pretty similar but after looking at the source code the first one relies on the window.onresize event and requires less code to implement.

useSize will add an iframe below the current component (z-index: -1) to track the size with resize event and requires more code. It also adds a little debounce with setTimeout.

So use useWindowSize if you just need the width/height to do some calculations on the first render and useSize if you'd like to show that the size changed.

useWindowSize

If you just need to get the window size useWindowSize is the way to go. They're doing it with onresize event with document.addEventlistener('resize', resizeHandler) and checking innerWidth / innerHeight Codesandbox Demo

useMeasure

To track an element size, useMeasure can be used. It is using ResizeObserver under the hood, so it's like the code above where ref is the reference you'd like to track:

The first element returned by useMeasure is the setRef method. So you can do the following in your component:

const [setRef, { width, height }] = useMeasure();
useEffect(() => {
    setRef(ref.current)
}, [])

Please have a look at the following Codesandbox.

useSize

If you want to track the size of a component useSize could be used as mentioned in the docs. Codesandbox Demo useSize

1

to my knowledge if it is concerned with style can only be registered by:

<Stage style={{width:window.innerWidth * 0.5,height:width:window.innerWidth * 0.5}} />
2
0

My solution using observer:

import { useEffect, useRef, useState } from "react";

export const useGetDivDimensions = () => {
  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });

  const div_ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver((event) => {
      setDimensions({
        height: event[0].contentBoxSize[0].blockSize,
        width: event[0].contentBoxSize[0].inlineSize,
      });
    });

    if (div_ref?.current) resizeObserver.observe(div_ref.current);
  }, [div_ref?.current]);

  return { dimensions, div_ref };
};

// ── USAGE ───────────────────────────────────────────────────────────────────────────

// const { dimensions, div_ref } = useGetDivDimensions();

// <div ref={div_ref}>
//   <div style={{height: dimensions.height}} />
// </div>;

// ── DOCS ───────────────────────────────────────────────────────────────────────────

// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize

source: https://gist.github.com/sturmenta/2bf6fa1e58d30c5977810b737c6173c0

0

the easiest way: react-use

import { useMeasure } from "react-use";

const Demo = () => {
  const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();

  return (
    <div ref={ref}>
      <div>x: {x}</div> 
      <div>y: {y}</div>
      <div>width: {width}</div>
      <div>height: {height}</div>
      <div>top: {top}</div>
      <div>right: {right}</div>
      <div>bottom: {bottom}</div>
      <div>left: {left}</div>
    </div>
  );
};

https://github.com/streamich/react-use/blob/master/docs/useMeasure.md

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.