use-request-animation-frame

React hook for easy access requestAnimationFrame browser API.
Written with Typescript and provides you with handy animation duration control.

Usage

• Basic usage requres only one handler:

  const nextAnimationFrameHandler = (progress: number) => {...};
  useRequestAnimationFrame(nextAnimationFrameHandler);

  With this nextAnimationFrameHandler will be called every frame and progress variable will always have value 1, so you wont need it in your nextAnimationFrameHandler

• Usage with duration:

  const myAnimatedDiv = React.useRef();
  const nextAnimationFrameHandler = (progress: number) => {
    if(myAnimatedDiv.current)
        myAnimatedDiv.current.style.left = progress * 100 + 'px'
    //...
  }
  useRequestAnimationFrame(nextAnimationFrameHandler, { duration: 2000 })

  In this casenextAnimationFrameHandler will be called every frame with progress calculated based on time when first animation frame was shown

• Usage with shouldAnimate:

  const [shouldAnimate, setShouldAnimate] = React.useState(false);
  
  const nextAnimationFrameHandler = (progress: number) => {...};
  useRequestAnimationFrame(nextAnimationFrameHandler, { duration: 2000, shouldAnimate });

  In this casenextAnimationFrameHandler will not be called initially and animation will start only after setShouldAnimate(true) call

⭐ Happy Hacking ⭐

You can find more implementation details in my article

GitHub

View Github