Documentation

Documentation

Error

dragConstraints ref not hydrated

dragConstraints ref not hydrated

You've received the following message:

If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.

dragConstraints ref not hydrated

You're trying to use a React ref as the dragConstraints of a draggable <motion /> component.

Explanation

This error appears when the ref is not hydrated.

const ref = useRef(null)

return <motion.div drag dragConstraints={ref} />

If the ref is not hydrated, this means it hasn't been passed to another element.

Solution

Pass the ref to another element, to use this element as the drag constraints:

const ref = useRef(null)

return (
  <div ref={ref} className="container">
    <motion.div drag dragConstraints={ref} />
  </div>
)

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.