useRafFn

Category

Animation

Export Size

481 B

Last Changed

5 days ago

Call function on every requestAnimationFrame. With controls of pausing and resuming.

Demo

Usage

import { useRafFn } from '@reause/core'
import { useState } from 'react'

const [count, setCount] = useState(0)

const { pause, resume } = useRafFn(() => {
  setCount(c => c + 1)
  console.log(count + 1)
})

Type Declarations

export interface Pausable {
    isActive: boolean;
    pause: () => void;
    resume: () => void;
}

export interface UseRafFnCallbackArguments {
    delta: number;
    timestamp: DOMHighResTimeStamp;
}

export interface UseRafFnOptions extends ConfigurableWindow {
    immediate?: boolean;
    fpsLimit?: number | null;
    once?: boolean;
}

export interface UseRafFnReturn {
    isActive: boolean;
    pause: () => void;
    resume: () => void;
}

export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options?: UseRafFnOptions): UseRafFnReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

40091 - fix(core): resolve useElementByPoint audit findings (#548)

f9906 - fix(core): resolve useRafFn audit findings (#627)

30916 - fix(test): stabilize flaky timing-sensitive browser tests

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)