useSpringValue

Love the imperative API but you need too many different springs running in parallel? Then this hook is for you! It's a simple wrapper around a SpringValue and therefore behaves the same, so you can access it's methods imperatively.

Usage

Value only

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

function MyComponent() {
  const opacity = useSpringValue(0)

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

With configuration

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

function MyComponent() {
  const opacity = useSpringValue(0, {
    config: {
      mass: 2,
      friction: 5,
      tension: 80,
    },
  })

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

Updating

Warning

Unlike our other hooks, this one will not react to updates in the component. This is by design. You must use the methods on the returned SpringValue to update said value.

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

function MyComponent() {
  const opacity = useSpringValue(0, {
    config: {
      mass: 2,
      friction: 5,
      tension: 80,
    },
  })

  const handleClick = () => opacity.start(1)

  return (
    <animated.div onClick={handleClick} style={{ opacity }}>
      Hello World
    </animated.div>
  )
}

Reference

Prop	Type	Default
`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`	–
`config`	`object \| function`	`object`
`events`	`function`	–

Typescript

function useSpringValue<T>(value: T): SpringValue<T>

function useSpringValue<T>(value: T, config: ConfigObject): SpringValue<T>

Where ConfigObject is described above

Examples

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