useSpring

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

Turns values into animated-values.

If you re-render the component with changed props, the animation will update.

const styles = useSpring({ opacity: toggle ? 1 : 0 })

You will get an API object back. It will not cause the component to render like an overwrite would (the animation still executes of course). Handling updates like this is useful for fast-occurring updates, and you should generally prefer it as it's more powerful. Further documentation can be found in Imperatives & Refs

const [styles, api] = useSpring(() => ({ opacity: 1 }))

// Update spring with new props
api.start({ opacity: toggle ? 1 : 0 })
// Stop animation
api.stop()

The return value is an object containing animated props.

return <animated.div style={styles}>i will fade</animated.div>

All properties documented in the common props apply.

Any property that useSpring does not recognize will be combined into "to", for instance opacity: 1 will become to: { opacity: 1 }.

// This ...
const props = useSpring({ opacity: 1, color: 'red' })
// is a shortcut for this ...
const props = useSpring({ to: { opacity: 1, color: 'red' } })

The to prop also allows you to 1. script your animation, or 2. chain multiple animations together. Since these animations will execute asynchronously, make sure to provide a from property for base values (otherwise, props will be empty).

function AsyncExample() {
  const styles = useSpring({
    to: async (next, cancel) => {
      await next({ opacity: 1, color: '#ffaaee' })
      await next({ opacity: 0, color: 'rgb(14,26,19)' })
    },
    from: { opacity: 0, color: 'red' },
  })
  // ...
  return <animated.div style={styles}>I will fade in and out</animated.div>
}

When using an async to function inside a component that renders frequently, you'll need to memoize your to function to prevent an unintended restart.

One solution is to use the useCallback hook.

useSpring({
  to: useCallback(async next => { ... }, []),
})

Another solution is to pass a props function.

useSpring(() => ({
  to: async next => { ... },
}))