How To Get The Height Of An Element Using A Ref In React

Posted on by Brent Johnson
Get the Height of an Element using a Ref in React

The useRef hook is a handy hook that helps you to get the DOM element created by JSX. So how do you use useRef to get the height of an element using a Ref in React? Let’s go into detail now.

Get the height of an element using a Ref in React

Solution 1: Use element.clientHeight              

Element.clientHeight will return the inner height of the element, which is the value of height content with padding.

Example code:

import { useEffect, useRef, useState } from 'react'
import './App.css'
 
function App() {
const h1Ele = useRef()
const h2Ele = useRef()
const h2ElePadding=useRef()
 
const [h1Height,setH1Height]= useState(0)
const [h2Height,setH2Height]=useState(0)
const [H2HeightPadding,setH2HeightPadding]=useState(0)
 
useEffect(()=>{
  setH1Height(h1Ele.current.clientHeight)
  setH2Height(h2Ele.current.clientHeight)
  setH2HeightPadding(h2ElePadding.current.clientHeight)
},[])
 
  return (
    <div className="App">
 
    <h1 ref={h1Ele}>Height Of H1</h1>
    <h3>Height:{h1Height}</h3>
    <h2 ref={h2Ele}>Height of H2 element</h2>
    <h3>Height:{h2Height}</h3>
    <h2 ref={h2ElePadding} style={{padding:'10px'}}>Height of H2 element with padding</h2>
    <h3>Height:{H2HeightPadding}</h3>
    </div>
  )
  }
 
export default App

Here I use the useEffect hook to make the code inside only run once when the page is already rendered. I get the height of the element by the clientHeight property then I set the state by the height of each element. H2 element has a height is 24. When I add padding to 10, the height will be 24 with 10 padding-top, and 10 padding-bottom is 44.

Output:

Solution 2: Use element.getBoundingClientRect()

The getBoundingClientRect() method will return a DOMRect which stands for DOM rectangle, giving you information about the size and position of your element. And the width and height that the method returns are the content element’s width and height plus padding and border width. And the position is based on a position with the viewport. It is something like this:

You can get height through this method.

Example code:

import { useEffect, useRef, useState } from 'react'
import './App.css'
 
function App() {
const h1Ele = useRef()
const h2Ele = useRef()
const h2ElePadding=useRef()
 
const [h1Height,setH1Height]= useState(0)
const [h2Height,setH2Height]=useState(0)
const [H2HeightPadding,setH2HeightPadding]=useState(0)
 
useEffect(()=>{
 
  setH1Height(h1Ele.current.getBoundingClientRect().height)
  setH2Height(h2Ele.current.getBoundingClientRect().height)
  setH2HeightPadding(h2ElePadding.current.getBoundingClientRect().height)
},[])
 
  return (
 
<div className="App">
    <h1 ref={h1Ele}>Height Of H1</h1>
    <h3>Height:{h1Height}</h3>
    <h2 ref={h2Ele}>Height of H2 element</h2>
    <h3>Height:{h2Height}</h3>
    <h2 ref={h2ElePadding} style={{padding:'10px'}}>Height of H2 element with padding</h2>
    <h3>Height:{H2HeightPadding}</h3>
    </div>
  )
  }
 
export default App

Output:

Here the output is just like with clientHeight except for the height of the H1 element because getBoundingClientRect() gets a more accurate value.

Summary

In this tutorial, I showed and explained how to get the height of an element using a Ref in React. You can use clientHeight or getBoundingClientRect() it up to you.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *