useAnimationFrame
HookRuns a callback on every animation frame with delta time. Auto-cleanup on unmount.
npx arupui add use-animation-frame
Usage
use-animation-frame.tsx
import { useAnimationFrame } from "@/hooks/use-animation-frame"
function ParticleSystem() {
const [particles, setParticles] = useState(initialParticles)
useAnimationFrame((delta) => {
setParticles(prev =>
prev.map(p => ({ ...p, y: p.y + p.speed * delta * 0.01 }))
)
})
return <Canvas particles={particles} />
}Parameters
| Parameter | Type | Description |
|---|---|---|
callback | (deltaTime: number) => void | Called each frame with ms elapsed |
callback(deltaTime: number) => voidCalled each frame with ms elapsed
Returns
void