useSprings

If you want to orchestrate multiple springs with a unified API, this is probably the best hook for you.

Usage

useSprings differs because we supply the amount of springs we want and then pass our configuration, whether you're using a function or not.

With a function & deps

import { useSprings, animated } from '@react-spring/web'
function MyComponent() {
const [springs, api] = useSprings(
2,
() => ({
from: { opacity: 0 },
to: { opacity: 1 },
}),
[]
)
return (
<div>
{springs.map(props => (
<animated.div style={props}>Hello World</animated.div>
))}
</div>
)
}

With a config object

import { useSprings, animated } from '@react-spring/web'
function MyComponent() {
const springs = useSprings(2, {
from: { opacity: 0 },
to: { opacity: 1 },
})
return (
<div>
{springs.map(props => (
<animated.div style={props}>Hello World</animated.div>
))}
</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 useSprings(count: number, configuration: ConfigObject): SpringValues[]
function useSprings(
count: number,
configurationFn: (springIndex: number) => 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!