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

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

• SpringValues

Examples

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