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:

``typescript
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:

`typescript
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:

`typescript
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

$3

You can find more implementation details in my article