CODEWITHSUNDEEP
reactjsreact-spring
nonopolarity
nonopolarity

Reputation: 151036

Using react-spring, AnimatedFoo = animated(Foo) doesn't work -- or how to animate a Component?

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?

Upvotes: 2

Views: 58

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53894

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

Upvotes: 1

Related Questions