@anton.bobrov/react-vevet-hooks/lib/types/hooks/useAnimationFrame.d.ts

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

import { AnimationFrame, NAnimationFrame } from 'vevet';
export interface IUseAnimationFrameOnFrameProps {
    /** The multiplier for frames per second (FPS). */
    fpsMultiplier: number;
    /** Real-time FPS */
    computedFPS: number;
}
export declare type TUseAnimationFrameOnFrame = (props: IUseAnimationFrameOnFrameProps) => void;
export interface IUseAnimationFrameProps extends Pick<NAnimationFrame.IChangeableProps, 'fps' | 'autoFpsFrames'> {
    /** Event triggered when the animation starts playing */
    onPlay?: () => void;
    /** Event triggered when the animation is paused */
    onPause?: () => void;
    /** Event triggered on each animation frame */
    onFrame: TUseAnimationFrameOnFrame;
}
/**
 * Custom React hook that integrates with `vevet`'s `AnimationFrame` class.
 *
 * This hook creates an animation frame instance, allowing for
 * customizable animation properties and callbacks for play, pause,
 * and frame events. It handles the lifecycle of the animation instance,
 * ensuring proper cleanup on component unmount.
 *
 * @example
 * const MyComponent = () => {
 *   const { play, pause } = useAnimationFrame({
 *     onPlay: () => console.log('Animation started'),
 *     onPause: () => console.log('Animation paused'),
 *     onFrame: ({ fpsMultiplier }) => {
 *       console.log('Frame updated, FPS Multiplier:', fpsMultiplier);
 *     },
 *   });
 *
 *   return (
 *     <div>
 *       <button onClick={play}>Play</button>
 *       <button onClick={pause}>Pause</button>
 *     </div>
 *   );
 * };
 */
export declare function useAnimationFrame({ onPlay: onPlayProp, onPause: onPauseProp, onFrame: onFrameProp, ...changeableProps }: IUseAnimationFrameProps): {
    frame: AnimationFrame<NAnimationFrame.IStaticProps, NAnimationFrame.IChangeableProps, NAnimationFrame.ICallbacksTypes> | null;
    play: () => void | undefined;
    pause: () => void | undefined;
};
//# sourceMappingURL=useAnimationFrame.d.ts.map