useAnimationFrame

Use this hook to create a callback that executes the provided function via window.requestAnimationFrame().

This hook is quite low level. You might want to use useAnimationFrameLoop() or useIdleCallback() instead.

Example

import { useAnimationFrame } from 'react-timing-hooks'

const myFunc = () => console.log("hi")
const runMyFuncOnAnimationFrame = useAnimationFrame(myFunc)

return <button onClick={runMyFuncOnAnimationFrame}>Click Me</button>

API

Params

useAnimationFrame()

Return value

A function. If you call this function, your callback will be executed at the next available animation frame.

Notes

Queued animation frame callbacks will be automatically canceled on unmount.