How to Get the Width of an Element in React
In this article, we will learn to get the width of an element in React. It often requires getting the element’s width to perform some operation according to width or other dimensions. So, here we will use the useRef() React hook to get the dimensions of a particular element.
Use the useRef() React Hook to Get the Width of an Element
Let’s try understanding the working of useRef() from scratch in React.
First, consider if you need to get the width of an element in vanilla JavaScript; what do you do? The answer is that first, access the DOM element and get the width property of that DOM element.
Here, we will use the useRef() to create a reference to the React DOM element. Users can use the useRef() hook to get the reference of any DOM element like the one below.
const ref = useRef(Initial DOM element);
return (
<div ref={ref} >
</div>
);
The useRef() hook contains a current property, and we can access the referenced element by using it. After getting the reference element, we can use offsetWidth to get the width of a particular referenced element.
let width = ref.current.offsetWidth;
In the example below, we have created the HTML <div> element and referenced it using the ref variable. Initially, we set the div’s height and width to 200px.
Furthermore, we have added the Change Div Size button, and when the user clicks on that, it will execute a changeDivSize() function.
The changeDivSize() function generates a random value between 100 to 300 and changes the div element size according to that. After that, we used ref.current.offsetWidth to get the new width of the div element.
Here, we have used the setTimeout() function to add some delay for getting the new width of the div element.
Example Code:
import { useState, useRef } from "react";
function App() {
// creating the variables for the div width and height
let [divWidth, setDivWidth] = useState("200px");
let [divheight, setDivheight] = useState("200px");
// variable to store the element's width from `ref`.
let [widthByRef, setWidthByRef] = useState(200);
// It is used to get the reference of any component or element
const ref = useRef(null);
// whenever user clicks on Change Div size button, ChangeDivSize() function will be called.
function changeDivSize() {
// get a random number between 100 and 300;
let random = 100 + Math.random() * (300 - 100);
// convert the random number to a string with pixels
random = random + "px";
// change the height and width of the div element.
setDivWidth(random);
setDivheight(random);
// get the width of the div element using ref.
// reason to add the setTimeout() function is that we want to get the width of the Div once it is updated in the DOM;
// Otherwise, it returns the old width.
setTimeout(() => {
setWidthByRef(ref.current ? ref.current.offsetWidth : 0);
}, 100);
}
return (
<div>
{/* showing width which we got using ref */}
<h3>Width of Element is : {widthByRef}</h3>
{/* resizable div element */}
<div
ref={ref}
style={{ backgroundColor: "red", height: divheight, width: divWidth }}
>
Click on the below buttons to resize the div.
</div>
{/* button to resize the div element */}
<button style={{ marginTop: "20px" }} onClick={changeDivSize}>
Change Div Size
</button>
</div>
);
}
export default App;
Output:
In the above output, users can see that when we click on the button, it changes the div’s size and shows the new width on the webpage.
