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:
- get window width and height in react
- Remove the underline of a Link in React
- Programmatically update query params in React router

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm