@anton.bobrov/react-vevet-hooks/lib/esm/hooks/useAnimationFrame.js

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

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { useEvent, useDeepCompareMemoize } from '@anton.bobrov/react-hooks';
import { useCallback, useEffect, useRef, useState } from 'react';
import { AnimationFrame } from 'vevet';
/**
 * 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 function useAnimationFrame(_a) {
    var onPlayProp = _a.onPlay, onPauseProp = _a.onPause, onFrameProp = _a.onFrame, changeableProps = __rest(_a, ["onPlay", "onPause", "onFrame"]);
    var _b = useState(null), frame = _b[0], setFrame = _b[1];
    var initialChangeablePropsRef = useRef(changeableProps);
    var onPlay = useEvent(onPlayProp);
    var onPause = useEvent(onPauseProp);
    var onFrame = useEvent(onFrameProp);
    useEffect(function () {
        var instance = new AnimationFrame(__assign(__assign({}, initialChangeablePropsRef.current), { isEnabled: false }));
        setFrame(instance);
        if (onPlay) {
            instance.addCallback('play', onPlay);
        }
        if (onPause) {
            instance.addCallback('pause', onPause);
        }
        instance.addCallback('frame', function () {
            return onFrame({
                fpsMultiplier: instance.fpsMultiplier,
                computedFPS: instance.computedFPS,
            });
        });
        return function () { return instance.destroy(); };
    }, [onFrame, onPause, onPlay]);
    useEffect(function () {
        if (!frame) {
            return;
        }
        frame.changeProps(changeableProps);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [frame, useDeepCompareMemoize(changeableProps)]);
    var play = useCallback(function () { return frame === null || frame === void 0 ? void 0 : frame.play(); }, [frame]);
    var pause = useCallback(function () { return frame === null || frame === void 0 ? void 0 : frame.pause(); }, [frame]);
    return { frame: frame, play: play, pause: pause };
}
//# sourceMappingURL=useAnimationFrame.js.map