[react-spring] Hooks / useSprings

Overview

import { useSprings, animated } from 'react-spring'

useSprings는 여러개의 spring을 각자의 config로 만들어 줍니다.

Either: overwrite values to change the animation

만약 바뀐 prop으로 컴포넌트가 re-render되면 애니메이션이 업데이트됩니다.

const springs = useSpring(
  number,
  items.map(item => ({opacity: item.opacity }))
)

Or: pass a function that returns values, and update using the api

api 객체를 리턴한다면 컴포넌트 자체가 re-render되지는 않지만 애니메이션을 바꿀 수는 있다. 그렇기 때문에 api객체를 이용한 업데이트는 빠르게 일어나는 업데이트에 효과적이다.
부가적으로 세번째 인자에 stop 함수도 들어간다.

const [springs, api] = useSprings(number, index => ({ opacity: 1 }))

// Update springs with new props
api.start(index => ({ opacity: 0 }))
// Stop all springs
api.stop()

Finally: distribute animated props among the view

return springs.map(styles => <animated.div style={styles} />)

Properties

property들은 [react-spring] Common / Props 에 있다.

Demos