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

PropTypeDefault
fromobject
toobject | object[] | function
loopboolean | object | function
delaynumber | function
immediateboolean | function
resetboolean
reverseboolean
pauseboolean
cancelboolean | string | string[] | function
refSpringRef
configobject | functionobject
eventsfunction

Typescript

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

Where ConfigObject is described above

TS Glossary

Examples

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