How to re-animate react-spring animation using hooks on button click?

Following simple component from the official examples:

import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={props}>I will fade in</animated.div>
}

Question

How do I animate the fadeIn-effect (or any other animation) again for example when I click on a button or when a promise is resolved?

You can basically make two effect with useSpring and an event.

1. You can change the style for example the opacity depending on the state of an event.

2. You can restart an animation on state change. The easiest way to restart is to rerender it.

I created an example. I think you want the second case. In my example I rerender the second component with changing its key property.

const Text1 = ({ on }) => {
  const props = useSpring({ opacity: on ? 1 : 0, from: { opacity: 0 } });
  return <animated.div style={props}>I will fade on and off</animated.div>;
};

const Text2 = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>I will restart animation</animated.div>;
};

function App() {
  const [on, set] = React.useState(true);

  return (
    <div className="App">
      <Text1 on={on} />
      <Text2 key={on} />
      <button onClick={() => set(!on)}>{on ? "On" : "Off"}</button>
    </div>
  );
}

Here is the working example: https://codesandbox.io/s/upbeat-kilby-ez7jy

I hope this is what you meant.