How to determine the size of a component in ReactJS ?

Last Updated : 09 Nov, 2023

To determine the size of a component in ReactJS we have to create the reference to access that object. This can be done by using the createRef method and the useRef hook in React JS.

Prerequisites:

Approach:

The size of a component is determined by the height and width of the container. It can be determined if we assign a ref to that component. The useRef function with ref attribute is used to get the current size of the component.

The useRef hook with ref attribute is here working to create a reference to the component whose size we want to determine.

useRef: The useRef is a hook that allows to directly create a reference to the DOM element in the functional component.
Refs: Refs are a function provided by React to access DOM elements and React elements that you might have created on your own.

The useRef returns a ref object. This object has a property called .current. The value is persisted in the refContainer.current property. Then with the help of refContainer.current we will be able to get the height and width of that component.

To get the height and width of the component we will use:

width: refContainer.current.offsetWidth
height: refContainer.current.offsetHeight

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Project structure:

Example: This example uses useRef hook to create the reference and hence determine the height and width of the component.

Javascript

// Filename - App.js
 
import React from "react";
import List from "./components/List";
 
function App() {
    return (
        <div className="App">
            <h1>Size of Component</h1>
            <List />
        </div>
    );
}
 
export default App;

Javascript

// Filename - components/List.js
 
import React, { useState, useEffect, useRef } from "react";
 
function List() {
    const refContainer = useRef();
    const [dimensions, setDimensions] = useState({
        width: 0,
        height: 0,
    });
    useEffect(() => {
        if (refContainer.current) {
            setDimensions({
                width: refContainer.current.offsetWidth,
                height: refContainer.current.offsetHeight,
            });
        }
    }, []);
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                height: "100%",
                backgroundColor: "#fafafa",
                margin: "20px",
            }}
            ref={refContainer}
        >
            <pre>
                Container:
                <br />
                width: {dimensions.width}
                <br />
                height: {dimensions.height}
            </pre>
        </div>
    );
}
 
export default List;