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

Someone Special · Accepted Answer · 2020-11-27 21:13:38Z

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...

answered Nov 27, 2020 at 21:13

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Julien FEGER Over a year ago

I'll try with a ref just to see. I used this implementation codesandbox.io/embed/q3ypxr5yp4 and it seems to work with {...bind} for him so I don't get why it wouldn't for me exepted if nextJS prevent it.

Julien FEGER Over a year ago

well it does work this way. Don't know why the codesandbow exemple works and not mine but oh well...maybe it use a different useMeasure() version. Thanks for correcting me either way.

Someone Special Over a year ago

note he uses customised useMeasure function imported from another file, not useMeasure directly. He uses ResizeObserver

Someone Special Over a year ago

the correct sandbox is here codesandbox.io/s/musing-kare-4fblz

Collectives™ on Stack Overflow

React useMeasure not working with nextJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related