What is the best way to monitor and record the height of a div element in a React application?

Question

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div

I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the height adjusts accordingly.

For instance, on a full screen the distance is 180, but on narrower screens it is longer. The calculation provided below should give me the correct value (80 added to the current height).

Located in utils/animation.js

window.onload = function getTextDivHeight() {

    const divElement = document.querySelector(".textContainer");
    const elHeight = divElement.offsetHeight;

    const divHeight = elHeight + 80;
    console.log(divHeight)

    return divHeight;
}

export const textDiv = getTextDivHeight();

Used in components

import { animationStart, textDiv } from "../../utils/animation";

const Video = () => {
    return (
        <motion.div
            initial={{ y: -{textDiv} }} // This value needs to change on page load.
            animate={{ y: 0 }}
            transition={{ delay: animationStart - 1.5, duration: 1.2 }}
        >
            <motion.video className="playVideo"
                autoPlay muted loop

            >
                <source src="../../src/assets/video.mp4"/>
            </motion.video>
        </motion.div>

    )
}

The targeted div (in another component)

const IntroText = () => {

    return (
        <div className="textContainer" id="textContainer"></div>

The issue I am facing is with "divElement" not being defined, possibly due to React's mounting/loading process. Is there a way to access and update this value onload?

My Attempts So Far

I have tried using useEffect and useState without success (as seen in the example below). Despite reading similar posts, I am still encountering errors.

    useEffect(() => {
         // code ...

         divsHeight = something

         setDivHeight(divsHeight) // usestate
    }, [])

javascript html css reactjs

Answer 1

Answer №1

If you're looking to grab the height using useRef instead of querySelector, there's a way to achieve that. I created a sandbox showcasing a demo which you can check out here. Simply adjust it according to your requirements by setting the ref in the .textContainer div through useEffect and then passing the height to the component in need.

const divRef = useRef(null);

const [divHeight, setDivHeight] = useState()

useEffect(() => {
  if (divRef.current) {
    console.log(divRef.current)
    setDivHeight(divRef.current.offsetHeight - 5)
  }
}, [])

const IntroText = () => {

    return (
        <div ref={divRef} className = "textContainer" id = "textContainer">

Answer 2

If you're looking to grab the height using useRef instead of querySelector, there's a way to achieve that. I created a sandbox showcasing a demo which you can check out here. Simply adjust it according to your requirements by setting the ref in the .textContainer div through useEffect and then passing the height to the component in need.

const divRef = useRef(null);

const [divHeight, setDivHeight] = useState()

useEffect(() => {
  if (divRef.current) {
    console.log(divRef.current)
    setDivHeight(divRef.current.offsetHeight - 5)
  }
}, [])

const IntroText = () => {

    return (
        <div ref={divRef} className = "textContainer" id = "textContainer">

Answer 3

Answer №2

The Resize Observer API provides a solution for this scenario. By utilizing a ref along with it, you can achieve the desired functionality. Here's an example using a <textarea>, which has a built-in resize control on most desktop browsers for testing purposes:

Please note: since Stack Overflow content is primarily in English, the demonstration assumes a horizontal writing-mode. If this does not apply to some of your users, additional logic will be needed for that case. For more information about blockSize and inlineSize, refer to this link.

View Code in TypeScript Playground

textarea { font-size: 1rem; }

<div id="root">Loading&hellip;</div><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaeb9bdbfa89cede4f2eef2ec">[email protected]</a>/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afddcaceccdb82cbc0c2ef9e97819d819f">[email protected]</a>/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="552621343b3134393a3b3015627b67667b60">[email protected]</a>/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

// This Stack Overflow snippet demo uses UMD modules
const { StrictMode, useEffect, useRef, useState } = React;

function useElementHeight(elementRef) {
  const [height, setHeight] = useState(
    () => elementRef.current ? elementRef.current.offsetHeight : 0,
  );

  useEffect(() => {
    if (!elementRef.current) return;
    const element = elementRef.current;

    const updateHeight = (entries) => {
      for (const entry of entries) {
        // Assumes horizontal writing-mode:
        const height = entry.borderBoxSize[0]?.blockSize;
        if (typeof height === "number") setHeight(height);
      }
    };

    const resizeObserver = new ResizeObserver(updateHeight);
    resizeObserver.observe(element, { box: "border-box" });
    return () => resizeObserver.unobserve(element);
  }, [elementRef, setHeight]);

  return height;
}

function App() {
  const ref = useRef(null);
  const height = useElementHeight(ref);
  return <textarea readOnly ref={ref} value={`${height} px`}></textarea>;
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

</script>

Answer 4

The Resize Observer API provides a solution for this scenario. By utilizing a ref along with it, you can achieve the desired functionality. Here's an example using a <textarea>, which has a built-in resize control on most desktop browsers for testing purposes:

Please note: since Stack Overflow content is primarily in English, the demonstration assumes a horizontal writing-mode. If this does not apply to some of your users, additional logic will be needed for that case. For more information about blockSize and inlineSize, refer to this link.

View Code in TypeScript Playground

textarea { font-size: 1rem; }

<div id="root">Loading&hellip;</div><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaeb9bdbfa89cede4f2eef2ec">[email protected]</a>/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afddcaceccdb82cbc0c2ef9e97819d819f">[email protected]</a>/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="552621343b3134393a3b3015627b67667b60">[email protected]</a>/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

// This Stack Overflow snippet demo uses UMD modules
const { StrictMode, useEffect, useRef, useState } = React;

function useElementHeight(elementRef) {
  const [height, setHeight] = useState(
    () => elementRef.current ? elementRef.current.offsetHeight : 0,
  );

  useEffect(() => {
    if (!elementRef.current) return;
    const element = elementRef.current;

    const updateHeight = (entries) => {
      for (const entry of entries) {
        // Assumes horizontal writing-mode:
        const height = entry.borderBoxSize[0]?.blockSize;
        if (typeof height === "number") setHeight(height);
      }
    };

    const resizeObserver = new ResizeObserver(updateHeight);
    resizeObserver.observe(element, { box: "border-box" });
    return () => resizeObserver.unobserve(element);
  }, [elementRef, setHeight]);

  return height;
}

function App() {
  const ref = useRef(null);
  const height = useElementHeight(ref);
  return <textarea readOnly ref={ref} value={`${height} px`}></textarea>;
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

</script>

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div

Located in utils/animation.js

Used in components

The targeted div (in another component)

My Attempts So Far

Answer №1

Answer №2

Similar questions

Is it possible to apply styles to the body of a document using styled-components?

Retrieving Data from all Rows in jQuery DataTables

What is the best way to extract the primary base64 value from reader.result?

Trouble with React.PropTypes in function components

How can I dynamically change the default value of the selected option dropdown in React-Select when a new option is chosen?

Media Queries elude my complete comprehension

Client.db is undefined error encountered in MongoDB backend API

The ES6 method of binding click handlers with parameters in React

I'm facing a CORS dilemma and I'm seeking assistance to resolve it

Oops! Issue encountered: Attempting to access properties of null object (specifically 'map')

Issue with publishing npm package using yarn package manager

The versatile aspect of my discord bot is its ability to function with various

Setting an Alias for AVA Tests: A Step-by-Step Guide

Delve into the world of tackling catastrophic backtracking with regex in Node

Connecting onClick event to a dynamically created div using Dojo

Having trouble integrating jQuery ui with webpack

How can I configure Angular.js in Webstorm?

Limiting querySelector to a specific React component: a step-by-step guide

Error: Unable to access attributes of an undefined object (looking for 'item')

Create an HTML and CSS code that allows you to split paragraph text into columns within a