[react-spring] Hooks / useSpring

Overview

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

Either: overwrite values to change the animation

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

const styles = useSpring({ opacity: toggle ? 1 : 0 })

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

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

API methods

const api = {
    // start your animation optionally giving new props to merge e.g. a `to` object
    start: (props) => AnimationResult,
    // sets the spring to specific passed values
    set: (props) => void,
    // Add props to each controller's update queue.
    update: (props) => this,
    // Add a controller to the springRef
    add: (ctrl) => this,
    // Delete a controller from the springRef
    delete: (ctrl) => this,
    // Cancel some or all animations depending on the keys passed, no keys will cancel all.
    stop: (cancel, keys) => this,
    // pause specific spring keys of the spring function
    pause: (keys) => this
    // resume specific spring keys of the spring function
    resume: (keys) => this
}

Finally: distribute animated props among the view

리턴값은 aminated props를 갖고 있는 객체이다.

return <animated.div style={styles}>i will fade</animated.div>

Properties

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

Additional notes

To-prop shortcut

프로퍼티 이름을 적지 않으면 "to" prop에 덮어씌워진다. 예를 들어 opacity: 1은 to: { opacity: 1 }가 된다.

Async chains/scripts

한개의 컴포넌트에 두개의 애니메이션을 비동기적으로 실행시키는 과정은 useChain을 이용하면 다소 번거롭다. 이때는 아래 방법처럼 to에 여러 await 값을 주어서 async chain을 쉽게 구현할 수 있다.

function AsyncExample() {
  const styles = useSpring({
    to: async (next, cancel) => {
      await next({ opacity: 1, color: '#ffaaee' })
      await next({ opacity: 0, color: 'rgb(14,26,19)' })
    },
    from: { opacity: 0, color: 'red' },
  })
  // ...
  return <animated.div style={styles}>I will fade in and out</animated.div>
}

만약 async to를 자주 렌더링하는 컴포넌트에서 사용할 경우 to 함수를 의도치 않은 재실행을 방지하기 위해 memoize할 필요가 있다.
한가지 방법은 useCallback hook을 사용하는 것이다.

useSpring({
  to: useCallback(async next => { ... }, []),
})

다른 한가지 방법은 props function을 넘겨주는 방법이다.

useSpring(() => ({
  to: async next => { ... },
}))

Demos