@anton.bobrov/react-vevet-hooks
Version:
A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library
91 lines (90 loc) • 3.86 kB
JavaScript
;
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAnimationFrame = void 0;
var react_hooks_1 = require("@anton.bobrov/react-hooks");
var react_1 = require("react");
var vevet_1 = require("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>
* );
* };
*/
function useAnimationFrame(_a) {
var onPlayProp = _a.onPlay, onPauseProp = _a.onPause, onFrameProp = _a.onFrame, changeableProps = __rest(_a, ["onPlay", "onPause", "onFrame"]);
var _b = (0, react_1.useState)(null), frame = _b[0], setFrame = _b[1];
var initialChangeablePropsRef = (0, react_1.useRef)(changeableProps);
var onPlay = (0, react_hooks_1.useEvent)(onPlayProp);
var onPause = (0, react_hooks_1.useEvent)(onPauseProp);
var onFrame = (0, react_hooks_1.useEvent)(onFrameProp);
(0, react_1.useEffect)(function () {
var instance = new vevet_1.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]);
(0, react_1.useEffect)(function () {
if (!frame) {
return;
}
frame.changeProps(changeableProps);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [frame, (0, react_hooks_1.useDeepCompareMemoize)(changeableProps)]);
var play = (0, react_1.useCallback)(function () { return frame === null || frame === void 0 ? void 0 : frame.play(); }, [frame]);
var pause = (0, react_1.useCallback)(function () { return frame === null || frame === void 0 ? void 0 : frame.pause(); }, [frame]);
return { frame: frame, play: play, pause: pause };
}
exports.useAnimationFrame = useAnimationFrame;