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

Typescript

function useSpring(configuration: ConfigObject): SpringValues 
 
function useSpring( 
 configurationFn: () => 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!