Get the Parent height and width in React

avatar

Borislav Hadzhiev

Last updated: Apr 27, 2022

banner

Photo from Unsplash

Get the Parent height and width in React #

To get the parent height and width in React:

  1. Set the ref prop on the element.
  2. In the useEffect hook, update the state variables for the height and width.
  3. Use the offsetHeight and offsetWidth properties to get the height and width of the element.
App.js
import {useEffect, useRef, useState} from 'react'; export default function App() { const ref = useRef(null); const [height, setHeight] = useState(0); const [width, setWidth] = useState(0); useEffect(() => { setHeight(ref.current.offsetHeight); setWidth(ref.current.offsetWidth); // 👇️ if you need access to parent // of the element on which you set the ref console.log(ref.current.parentElement); console.log(ref.current.parentElement.offsetHeight); console.log(ref.current.parentElement.offsetWidth); }, []); return ( <div ref={ref}> <h2>Width: {width}</h2> <h2>Height: {height}</h2> </div> ); }

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We passed an empty dependencies array to the useEffect hook, so it's only going to run when the component mounts.

App.js
useEffect(() => { setHeight(ref.current.offsetHeight); setWidth(ref.current.offsetWidth); // 👇️ if you need access to parent // of the element on which you set the ref console.log(ref.current.parentElement); console.log(ref.current.parentElement.offsetHeight); console.log(ref.current.parentElement.offsetWidth); }, []);

We used the useEffect hook because we need to wait for the ref to be set on the element and for the element to get rendered before accessing its offsetHeight and offsetWidth properties.

The offsetHeight property returns the height of the element in pixels, including vertical padding and borders.

The offsetWidth property returns the width of the element in pixels, including any borders, padding and vertical scrollbars (if present).

If you need to access the width and height of the parent of the element on which you set the ref, use the parentElement property.

App.js
console.log(ref.current.parentElement); console.log(ref.current.parentElement.offsetHeight); console.log(ref.current.parentElement.offsetWidth);

The parentElement property returns the DOM node's parent element or null if the node has no parent, or its parent is not a DOM element.

You can alternatively use the clientHeight and clientWidth properties.

App.js
useEffect(() => { setHeight(ref.current.clientHeight); setWidth(ref.current.clientWidth); // 👇️ if you need access to parent // of the element on which you set the ref console.log(ref.current.parentElement); console.log(ref.current.parentElement.clientHeight); console.log(ref.current.parentElement.clientWidth); }, []);

The clientWidth property, which returns the width of the element in pixels, including padding but excluding borders, margins and vertical scrollbars (if present).

The clientHeight property returns the inner height of the element in pixels. It includes padding but excludes borders, margins and horizontal scrollbars (if present).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.