Question 299733 in Html Question posted in
Some basic documentation can be found here.

Html – How to keep track of a divs height in React?

What I am attempting to do

I would like to keep track of a divs height so I can dynamically change the distanced the animation is needed to travel depending on screen width (when screen is narrow, text stacks and the height changes).

For example, on a fullscreen the distance is 180, narrow screens are longer.
The calculation below would give me the correct value I believe (80 for 40 margin).

in utils/animation.js
window.onload = function textDivHeight() {

    divElement = document.querySelector(".textContainer");
    elHeight = divElement.offsetHeight;
    
    divHeight = elHeight + 80;
    console.log(divHeight)

    return divHeight
}

export const textDiv = textDivHeight();
In components
import { animationStart, textDiv } from "../../utils/animation";

const Video = () => {
    return (
        <motion.div
            initial = {{ y: -{textDiv} }} // this value I want to be changing 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 div I’m trying to access (another component)
const IntroText = () => {

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

The problem I am running into is divElement not being defined, I believe this is due to react and mounting/loading. Is there a way to access and change this value onload?

What I’ve attempted

I’ve also attempted the use of a useEffect and useState to no avail ("example" show below). I have also read through other similar posts and am still getting the error. Sorry, I’m new to react and coding in general.

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

         divsHeight = something

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

2

Answers


  1. 0

    You could use useRef and grab the height in a similar way to what you’re doing with the querySelector. I made a codesandbox where you can see a demo. You’re just going to need to adjust it to your use case. But the idea would be set the ref in the .textContainer div using useEffect, and then pass the height to the component that needs it.

    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">
    Login or Signup to reply.
  2. 0

    You’re using Hooks in React to create elements on the DOM but using window events to handle them. I think you should use useRef and wrap it in MutationObserver.

    MutationObserver keeps track of what happens inside Node so be careful when using it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search