react-decode-animation
Version:
Decode effect typing animation for React
64 lines • 2.78 kB
JavaScript
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 React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
import { CharacterList } from "../CharacterList";
import useDecodeAnimation from "../hooks/useDecodeAnimation";
import useOnScreen from "../hooks/useOnScreen";
import { DecodeAnimationCharacter, } from "./DecodeAnimationCharacter";
/**
* Decode effect typing animation for React
*/
const DecodeAnimation = forwardRef((_a, ref) => {
var { autoplay = false, interval = 100 } = _a, props = __rest(_a, ["autoplay", "interval"]);
const [isRendered, setRendered] = useState(false);
const [isAutoplayed, setAutoplayed] = useState(false);
const spanRef = useRef(null);
const isOnScreen = useOnScreen(spanRef);
const { text, currentIndex, state, play, pause, reset } = useDecodeAnimation({
value: props.text,
interval,
onFinish: props.onFinish,
});
const placeholders = Array.apply({}, Array(props.text.length));
const characterList = new CharacterList(props.allowedCharacters, props.customCharacters);
useImperativeHandle(ref, () => ({ play, pause, reset }), []);
useEffect(() => {
setRendered(true);
}, []);
useEffect(() => {
if (autoplay && !isAutoplayed) {
console.log("play");
play();
}
setAutoplayed(true);
}, [isOnScreen]);
useEffect(() => {
switch (props.state) {
case "Playing":
play();
break;
case "Paused":
pause();
break;
case "Reset":
reset();
break;
}
}, [props.state]);
return (React.createElement("span", { ref: spanRef, className: props.className, style: props.style }, isRendered ? (React.createElement(React.Fragment, null,
text,
placeholders.map((_, index) => {
return (index >= currentIndex && (React.createElement(DecodeAnimationCharacter, { key: index, isPlaying: state === "Playing", loopString: characterList.shuffle(), options: props.characterOptions })));
}))) : (props.text.split("").map(() => "-"))));
});
export default DecodeAnimation;
//# sourceMappingURL=DecodeAnimation.js.map