So how do you do without animated anymore?

[kevinRoomies]

Until now I was using transition as a renderprops because I didn't have to use animated.div but now I can't do that anymore, animated.div is forced on transition and I just can't use transition anymore with custom components...

[joshuaellis]

Hi @kevinRoomie have you got an example in a codesandbox? I can show you what I would do to rectify this! But in short, have you tried wrapping the component in Animated:

import { animated } from '@react-spring/web'

const MyAnimatedComponent = animated(RegularComponent)

[joshuaellis]

Sorry, it should just be animated, i've amended the above. If you're able to draw up a codesandbox, happy to take a look 👍🏼

[kevinRoomies]

I put something quick together
https://codesandbox.io/s/react-spring-transition-custom-component-bjnou?file=/src/App.js

[joshuaellis]

Ah so the API has changed so there's only one function used as the child of Transition.

Here's an updated sandbox demonstrating it working – https://codesandbox.io/s/react-spring-transition-custom-component-forked-4ztw8?file=/src/Menu/Menu.jsx

and here's the updated documentation for more information – https://react-spring.io/components/transition#mountunmount-single-component-reveals

[kevinRoomies]

Ah yes this is working perfectly, thank you, this also allows me to use other spring components I couldn't because of the animated.div this is great!
I don't know where it is mentionned to use that in the doc but if it isn't it surely need to, this is life changing

[joshuaellis]

It's documented here – https://react-spring.io/basics#finally-tie-the-animated-values-to-your-view

If you're happy with this, feel free to mark this thread as the answer!