How To Get The Parent Height And Width In React

If you don’t know how to get the Parent height and width in React, don’t worry. We will give you some ways to do it in this article. Read on it now.

Get the Parent height and width in React

Use ref.current.offsetHeight and ref.current.offsetWidth method

A ref is a tag or element’s self-representative attribute in React. We can get to the mounted DOM node or React element with ref. By calling document.getElementById(), we can work with DOM elements in standard Javascript. We don’t have to work with React’s references. The ref attribute will refer to the specified element. This way, we will use the useRef hook to represent the parent <div> tag.

Code:

import { useEffect, useRef, useState } from "react";
 
export default function App() {
  const ref = useRef(null);
  const [parentHeight, setParentHeight] = useState(0);
  const [parentWidth, setParentWidth] = useState(0);
 
  useEffect(() => {
    //Set State to parent width and height
    setParentHeight(ref.current.offsetHeight);
    setParentWidth(ref.current.offsetWidth);
  }, []);
 
  return (
    <div ref={ref}>
      <h2>Get the Parent parentHeight and width | LearnShareIT</h2>
      <h3>Parent width: {parentWidth}</h3>
      <h3>Parent height: {parentHeight}</h3>
    </div>
  );
}

Output:

So through ref. current, we got the parent tag’s length and width attributes by calling offsetWidth and offsetHeight. Then we set the state parent width and parent height to their respective values ​​and rendered them to the screen as shown above.

Use react-use method

The react-use library includes an extensive collection of hooks, much larger than any other hooks library, including hooks that can interact with hardware that the browser can access. In this article, we will learn some hooks through an example and list all the ones the library has.

Terminal:

npm i react-use

After installing the library, we will use the useSize hook in the react-use library because this hook can keep track of the size of the HTML element.

Code:

import { useSize } from "react-use";

export default function App() {
  const [sized, { width, height }] = useSize(
    () => (
      <div>
        <h2>Get the Parent parentHeight and width | LearnShareIT</h2>
      </div>
    ),
    { width: 100, height: 100 }
  );
  return (
    <div className="App">
      <div>
        {sized}
        <h3>Parent width: {width}</h3>
        <h3>Parent height: {height}</h3>
      </div>
    </div>
  );
}

And the output is the same result as above, but it seems much faster. This library is functional and has many valuable hooks. It would help if you researched more about it. I hope the methods are helpful to you.

Summary

To summarize, there are many ways to get the Parent height and width in React. After reading this article, we know some simple ways like using ref.current.offsetHeight and ref. current.offsetWidth method or using the react-use method. Let’s try these methods. Good luck for you!

Maybe you are interested:

• Get the current URL and Pathname in React
• Get window width and height in react
• Get the Width of an Element in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs