React-spring: lacking documentation: how to pass a spring to animated component

[jutunen]

https://www.react-spring.io/docs/hooks/basics says following:

If you want to animate React components, styled-components, or elements on other platforms, then do this:

// React components
const AnimatedDonut = animated(Donut)

Let's assume that I have a following spring definition:

const props = useSpring({opacity: 1, from: {opacity: 0}})

Could you please tell me how to pass the defined spring to the animated component?

[jutunen]

Can't see any props passing on this line:

// React components
const AnimatedDonut = animated(Donut)

[IngoValente]

That's because that's only recreating your component to be ready to be animated, you still need to render it.

const props = useSpring({opacity: 1, from: {opacity: 0}})
return (
    <AnimatedDonut style={props}/>
)

[jutunen]

That's because that's only recreating your component to be ready to be animated, you still need to render it.

const props = useSpring({opacity: 1, from: {opacity: 0}})
return (
    <AnimatedDonut style={props}/>
)

Now this is documentation!

Hopefully this info gets to place where it belongs to, instead of being buried here among other issues.

[lu-zen]

That's because that's only recreating your component to be ready to be animated, you still need to render it.

const props = useSpring({opacity: 1, from: {opacity: 0}})
return (
    <AnimatedDonut style={props}/>
)

Now this is documentation!

Hopefully this info gets to place where it belongs to, instead of being buried here among other issues.

You can submit a PR, it's open source ; )