3

I know that I can apply motion directly to element/HTMLtag like this:

<motion.div>some content</div>

But how can I apply it to this?

<Comp />

Without wrapping it inside another HTML element, like in React-Transition-Group library.

Framer API provides Frame component, but it acts like permanent additional HTML element with own styling, and it is messing my layout.

Andrew
  • 421
  • 2
  • 16

2 Answers2

14

If anyone comes to this page seeking for the solution of how to apply motion from Framer-Motion library to your React Component and not the direct DOM element like "div" or "span", here it is:

motion.custom()

Example of use:

import { Link } from "react-router-dom"

const MotionLink = motion.custom(Link)

return <MotionLink />

As for today it is not mentioned in the official documentation, or it is in someplace deep and hard to find.

I had found it in BUG reports here, there is a Codesanbox that illustrates my example, created by the person who reported a bug.

Andrew
  • 421
  • 2
  • 16
4

Without using any internal fuctions, You just need to wrap it with any motion element:

<motion.div>
  <Comp />
</motion.div>

You can notice such behavior across examples in the docs, like of Side Menu example.

Dennis Vash
  • 31,365
  • 5
  • 46
  • 76
  • You can pass Component through props but that's a bad practice, usually you go for `props.children` or HOC, you can read about it in React docs. – Dennis Vash Jun 25 '20 at 11:55