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.

Alternatives

• useAnimationFrameLoop()
• useIdleCallback()
• useTimeout()

Example

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

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

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

API

useAnimationFrame(callback)

Params

Name	Description
callback	A function that will be called at the next available animation frame. See requestAnimationFrame()

Return value

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

Notes

Queued animation frame callbacks will be automatically canceled on unmount.