React Get Height of Element

You can use the getBoundingClientRect() method, the offsetHeight property, or the react-measure library to find the height of an HTML element in React.

3 Ways to get height

1. getBoundingClientRect() method

This method returns the size of an element and its position relative to the viewport. You should use the useRef and useEffect hooks with the getBoundingClientRect() the method in the functional component.

In this example, we create a ref called elementRef and attach it to the div element. Inside the useEffect hook, we access the element using elementRef.current and retrieve its height by calling getBoundingClientRect().height. The height value is then logged to the console.

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    const { height } = element.getBoundingClientRect();
    console.log('Height:', height);
  }, []);

  return <div ref={elementRef}>Hello, World!</div>;
};

export default MyComponent;

2. offsetHeight property

We can find the height of an element, including vertical padding and borders, but not margins by using this offsetHeight property.

In this example, we follow the same structure as we used in the previous method, but in this method, we retrieve the height using offsetHeight . The offsetHeight property directly provides the height of the element, including any vertical padding or borders. The value is then logged to the console.

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    const height = element.offsetHeight;
    console.log('Height:', height);
  }, []);

  return <div ref={elementRef}>Hello, World!</div>;
};

export default MyComponent;

3. react-measure library

In this method, you need to install the library “react-measure”. It simplifies the process of measuring DOM elements by providing a convenient API. To install this library, run the command “npm install react-measure” in your project’s terminal, it will automatically import all the files required by react-measure. And then import the necessary components: import { Measure } from 'react-measure';

In the below example, we’ve created the functional component, which we defined as a callback function “handleMeasure” that receives the “contentRect” containing the element’s measurements. Then extract the height contentRect.bounds.height and logged it. Finally, wrapped within the Measure component, and measureRef is applied to it.

import React from 'react';
import { Measure } from 'react-measure';

const MyComponent = () => {
  const handleMeasure = (contentRect) => {
    const height = contentRect.bounds.height;
    console.log('Height:', height);
  };

  return (
    <Measure bounds onResize={handleMeasure}>
      {({ measureRef }) => (
        <div ref={measureRef}>Hello, World!</div>
      )}
    </Measure>
  );
};

export default MyComponent;