2

In react-spring Basics page:

const AnimatedDonut = animated(Donut)

because I think <animated.div> can work, but <animated.Donut> doesn't work.

So I tried:

https://codesandbox.io/s/weathered-breeze-ghdse


const AnimatedFoo = animated(Foo);
// ....

return <AnimatedFoo style={props}>I will fade in</AnimatedFoo>;

but it doesn't animated. Is it supposed to be the way it works?

nonopolarity
  • 146,324
  • 131
  • 460
  • 740

1 Answers1

1

You suppose to pass the style prop in React component, similar to whats happening with CSS-in-JS where you pass className.

// Add style prop
function Foo({ children, style }) {
  return <div style={style}>Hello World {children}</div>;
}

Edit youthful-roentgen-r5310

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • thank you, it works. I have noticed both places have to call it `style`. We cannot call it `bar` and pass to `Foo` and use `style={bar}` there. The `bar` has to be `style` as well – nonopolarity Apr 21 '21 at 12:13