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

tsx

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

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

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

With configuration

tsx

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. :::

tsx

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

import { TablesConfiguration } from '../components/Tables/TablesConfig' import { USESPRINGVALUE_CONFIG_DATA } from '../data/fixtures'

Typescript

tsx

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

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

Where ConfigObject is described above

Examples

import { ExampleGrid } from '../components/Grids/ExampleGrid'

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