[FEATURE] motion component should be a constructor

Problem

When using libraries that have components, I want to make that component inherit the motion.element props.

When it’s my own component, the motion.element isn’t a problem because I can add any classes but how can I make a component called <Dropdown /> Inherit motion props? I can’t simply wrap it around a motion component because it can throw the styling off.

Solution

If we make the motion export also be a constructor that can allow me to create a new component that can be animated like so:

const MotionDropdown = motion(Dropdown);

Other libraries

Currently react-spring has this functionality with their animated component. https://www.react-spring.io/docs/hooks/basics

const AnimatedDonut = animated(donut);

[mattgperry]

Yeah but this is a method on motion, not a prop.

const Component = React.forwardRef((props, ref) => {
  return <div ref={ref} />
})

const MotionComponent = motion.custom(Component)

export default App() {
  return <MotionComponent animate={} />
}

[focux]

Yes, it’s not on the docs, I searched it for a while with no luck but glad I could find this issue.