react-decode-animation
Version:
Decode effect typing animation for React
50 lines • 2.97 kB
JavaScript
import React, { useRef, useState } from "react";
import DecodeAnimation from "..";
const DecodeAnimationExample = ({}) => {
const [decodeState, setDecodeState] = useState("Paused");
const [finished, setFinished] = useState(false);
const ref = useRef(null);
return (React.createElement("div", { style: { fontFamily: "sans-serif", paddingTop: 1000 } },
React.createElement(DecodeAnimation, { autoplay: true, text: "Lorem ipsum dolor sit amet.", ref: ref, state: decodeState, characterOptions: { intervalDeviation: 20, interval: 70 }, interval: 100, onFinish: () => setFinished(true), style: {
display: "inline-block",
backgroundColor: "#ececec",
// borderRadius: 4,
width: 300,
padding: 16,
marginBottom: 16,
} }),
React.createElement("div", null,
"onFinished Called: ",
finished ? "Yes" : "No"),
React.createElement("section", { style: {
border: "1px solid grey",
borderRadius: 4,
padding: "0 16px 16px",
marginTop: 8,
} },
React.createElement("h3", null, "Control with Ref"),
React.createElement("p", null, "With refs, DecodeAnimation will handle the state automatically. The state, however, cannot be accessed"),
React.createElement("button", { onClick: () => {
var _a;
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.play();
} }, "Play"),
React.createElement("button", { onClick: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.pause(); } }, "Pause"),
React.createElement("button", { onClick: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset(); } }, "Reset")),
React.createElement("section", { style: {
border: "1px solid grey",
borderRadius: 4,
padding: "0 16px 16px",
marginTop: 8,
} },
React.createElement("h3", null, "Control with States"),
React.createElement("p", null, "With setting an external state, it will trigger DecodeAnimation to re-render. The external state will not be updated when the state of DecodeAnimation changes"),
React.createElement("button", { onClick: () => setDecodeState("Playing") }, "Play"),
React.createElement("button", { onClick: () => setDecodeState("Paused") }, "Pause"),
React.createElement("button", { onClick: () => setDecodeState("Reset") }, "Reset"))));
};
export default {
title: "Example",
component: DecodeAnimationExample,
};
export const Template = (args) => React.createElement(DecodeAnimationExample, Object.assign({}, args));
//# sourceMappingURL=Example.stories.js.map