Skip to content

useRaf ​

Hook that defines the logic for raf callback

utilities
test coverage
Last changed: last month

TIP

This hook uses requestAnimationFrame browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation ​

Library
CLI
Manual
typescript
import { useRaf } from '@siberiacancode/reactuse';

Usage ​

typescript
useRaf(() => console.log('callback'));

Demo ​

Api ​

Parameters

NameTypeDefaultNote
callbackUseRafCallback-The callback to execute
options.delay?number-The delay between each frame in milliseconds
options.enabled?booleantrueWhether the callback should be enabled

Returns

UseRafCallbackReturn

Type declaration ​

typescript
export interface UseRafParams {
  /** The delta between each frame in milliseconds */
  delta: number;
  /** The timestamp of the current frame in milliseconds */
  timestamp: DOMHighResTimeStamp;
}

export type UseRafCallback = (params: UseRafParams) => void;

export interface UseRafOptions {
  /** The delay between each frame in milliseconds */
  delay?: number;
  /** Whether the callback should be enabled */
  enabled?: boolean;
}

export interface UseRafReturn {
  /** Whether the callback is active */
  active: boolean;
  /** Function to pause the callback */
  pause: () => void;
  /** Function to resume the callback */
  resume: () => void;
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.