React useMeasure not working with nextJS?

Question

I'm currently trying to animate a div so that it slides from bottom to top inside a card.

The useMeasure hook is supposed to give me the height of the wrapper through the handler I attached to it : <div className="desc-wrapper" {...bind}>

Then I am supposed to set the top offset of an absolutely positionned div to the height of its parent and update this value to animate it.

The problem is that when logging the bounds returned by the useMeasure() hook, all the values are at zero...

Here is a link to production exemple of the panel not being slided down because detected height of parent is 0 : https://next-portfolio-41pk0s1nc.vercel.app/page-projects

The card component is called Project, here is the code :

import React, { useEffect, useState } from 'react'
import './project.scss'
import useMeasure from 'react-use-measure';
import { useSpring, animated } from "react-spring";


const Project = (projectData, key) => {
    const { project } = projectData

    const [open, toggle] = useState(false)
    const [bind, bounds] = useMeasure()
    const props = useSpring({ top: open ? 0 : bounds.height })

    useEffect(() => {
        console.log(bounds)
    })

    return (
        <div className="project-container">
            <div className="img-wrapper" style={{ background: `url('${project.illustrationPath}') no- 
              repeat center`, backgroundSize: project.portrait ? 'contain' : 'cover' }}>
            </div>
            <div className="desc-wrapper" {...bind} >
                <h2 className="titre">{project.projectName}</h2>
                <span className="description">{project.description}</span>
                <animated.div className="tags-wrapper" style={{ top: props.top }}>

                </animated.div>
            </div>
        </div>
    );
};

export default Project;

Is this a design issue from nextJS or am I doing something wrong ? Thanks

Answer 1

I never used react-use-measure, but in the documentations, the first item in the array is a ref and you are suppose to use it this way.

function App() {
  const [ref, bounds] = useMeasure()

  // consider that knowing bounds is only possible *after* the view renders
  // so you'll get zero values on the first run and be informed later

  return <div ref={ref} />
}

You did...

<div className="desc-wrapper" {...bind} >

Which I don't think is correct...