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

Prop	Type	Default
`from`	`object`	–
`to`	`object \| object[] \| function`	–
`loop`	`boolean \| object \| function`	–
`delay`	`number \| function`	–
`immediate`	`boolean \| function`	–
`reset`	`boolean`	–
`reverse`	`boolean`	–
`pause`	`boolean`	–
`cancel`	`boolean \| string \| string[] \| function`	–
`ref`	`SpringRef`	–
`config`	`object \| function`	`object`
`events`	`function`	–

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!