@anton.bobrov/react-vevet-hooks
Version:
A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library
90 lines (89 loc) • 4.12 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.useTimeline = 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 creates a `vevet` timeline instance.
*
* This hook initializes a timeline with the specified properties and
* sets up event callbacks for timeline events such as start, progress,
* and end. It provides functions to control the playback of the timeline.
*
* @example
* const MyComponent = () => {
* const { play, pause, reset } = useTimeline({
* easing: EaseInBounce,
* duration: 1000,
* onStart: () => console.log('Timeline started'),
* onProgress: (data) => console.log('Progress:', data),
* onEnd: () => console.log('Timeline ended'),
* });
*
* return (
* <div>
* <button onClick={play}>Play</button>
* <button onClick={pause}>Pause</button>
* <button onClick={reset}>Reset</button>
* </div>
* );
* };
*/
function useTimeline(_a) {
var easing = _a.easing, onStartProp = _a.onStart, onProgressProp = _a.onProgress, onEndProp = _a.onEnd, changeableProps = __rest(_a, ["easing", "onStart", "onProgress", "onEnd"]);
var _b = (0, react_1.useState)(), timeline = _b[0], setTimeline = _b[1];
var initialChangeablePropsRef = (0, react_1.useRef)(changeableProps);
var onStart = (0, react_hooks_1.useEvent)(onStartProp);
var onProgress = (0, react_hooks_1.useEvent)(onProgressProp);
var onEnd = (0, react_hooks_1.useEvent)(onEndProp);
(0, react_1.useEffect)(function () {
var instance = new vevet_1.Timeline(__assign(__assign({}, initialChangeablePropsRef.current), { easing: easing }));
setTimeline(instance);
if (onStart) {
instance.addCallback('start', onStart);
}
if (onProgress) {
instance.addCallback('progress', onProgress);
}
if (onEnd) {
instance.addCallback('end', onEnd);
}
return function () { return instance.destroy(); };
}, [easing, onEnd, onProgress, onStart]);
(0, react_1.useEffect)(function () {
if (!timeline) {
return;
}
timeline.changeProps(changeableProps);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timeline, (0, react_hooks_1.useDeepCompareMemoize)(changeableProps)]);
var play = (0, react_1.useCallback)(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.play(); }, [timeline]);
var reverse = (0, react_1.useCallback)(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.reverse(); }, [timeline]);
var pause = (0, react_1.useCallback)(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.pause(); }, [timeline]);
var reset = (0, react_1.useCallback)(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.reset(); }, [timeline]);
return { timeline: timeline, play: play, reverse: reverse, pause: pause, reset: reset };
}
exports.useTimeline = useTimeline;