What is the simplest way to animate `React.Component` with `react-spring` when prop is updated

Question

How to animate React Component with react-spring library depend on props updating

I found this https://codesandbox.io/s/xpqq0ll5nw and want to implement the same with hooks

const Counter = ({quantity}) => {
  const animation = useSpring({
    transform: 'scale(1)',
    from: { transform: 'scale(1.2)' },
  });

  return (
    <animated.span style={animation}">
      {quantity}
    </animated.span>
  )
}

like this https://www.react-spring.io/docs/hooks/basics? – duc mai Apr 14 '19 at 19:46 — duc mai, Apr 14 '19 at 19:46
Please look at . https://codesandbox.io/embed/9l8nlz3y7y – sliim35 Apr 16 '19 at 07:50 — sliim35, Apr 16 '19 at 07:50

score 0 · Accepted Answer · answered Apr 15 '19 at 08:28

Your Counter component is about right. The key here is the 'key' property. When the counter changes it alternates between 1 and 0. And each time the key changes React assign a new Counter component instance instead the old one repeating the initial animation of the Counter component.

  class App extends Component {
    state = { count: 0 };
    increment = () => this.setState({ count: this.state.count + 1 });
    render() {
      return (
        <Fragment>
          <button onClick={this.increment}>Update!</button>
          <Counter key={this.state.count % 2} quantity={this.state.count} />
        </Fragment>
      );
    }
  }

Here is the whole example: https://codesandbox.io/s/jjyp6p0yl9

What is the simplest way to animate `React.Component` with `react-spring` when prop is updated

1 Answers1