Motion: How do I make <motion> work with custom primitive components?

[vasilenka]

I have few primitives components (i.e. ) that under the hood just wrap its children with HTML text tags.

When using motion, It'll add a wrapper to the components. For example:

<motion.p>
  <Text as="p">{...}</Text>
</motion.p>

will output to:

<p> // from motion
  <p>{...}</p> // from primitives
</p>

while the desired output is:

<p>{...}</p> // from primitives with addition of motion's props

I've been looking in the docs and digging a little in the source code but seems like there's no way to achieve this for now.

The only way to achieve cleaner output is by modifying the primitive components and including the by default.

Any suggestion on how to achieve this?
If anyone could point me out to where I should be looking for would be helpful.

[mattgperry]

On the assumption your component passes on ref to the primitive:

const MotionText = motion.custom(Text)

[vasilenka]

Yeah, it works!
Just need a little bit tweak on my custom primitives to forward the ref because it's using HOC too 😅

Anyway, thank you for the quick response and this amazing library.
You sir are awesome!

[zeckdude]

I was trying to find this information as well (seems like a fairly common use-case) and I couldn't find anything about it in the docs. Did I just miss it?