useSpring

Our flagship hook. Applicable to most use-cases. If you want to orchestrate many of these hooks, consider using useSprings.

Usage

Whether you're using a function or not, it's all about passing a config object to the hook.

With a function & deps

import { useSpring, animated } from '@react-spring/web'

function MyComponent() {
  const [props, api] = useSpring(
    () => ({
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    []
  )

  return <animated.div style={props}>Hello World</animated.div>
}

With a config object

import { useSpring, animated } from '@react-spring/web'

function MyComponent() {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return <animated.div style={props}>Hello World</animated.div>
}

Reference

Typescript

function useSpring(configuration: ConfigObject): SpringValues

function useSpring(
  configurationFn: () => ConfigObject,
  deps?: any[]
): [springs: SpringValues, api: SpringRef]

Where ConfigObject is described above

TS Glossary

• SpringValues

Examples

Can't find what you're looking for? Check out all our examples!