txtroller
Version:
A customizable React typewriter component with 15+ animation variants.
321 lines (320 loc) • 10.2 kB
JavaScript
import ne, { useState as S, useEffect as oe } from "react";
var h = { exports: {} }, k = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var L;
function ae() {
if (L) return k;
L = 1;
var a = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
function i(m, s, u) {
var E = null;
if (u !== void 0 && (E = "" + u), s.key !== void 0 && (E = "" + s.key), "key" in s) {
u = {};
for (var c in s)
c !== "key" && (u[c] = s[c]);
} else u = s;
return s = u.ref, {
$$typeof: a,
type: m,
key: E,
ref: s !== void 0 ? s : null,
props: u
};
}
return k.Fragment = l, k.jsx = i, k.jsxs = i, k;
}
var x = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var U;
function se() {
return U || (U = 1, process.env.NODE_ENV !== "production" && function() {
function a(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === ee ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case p:
return "Fragment";
case V:
return "Profiler";
case z:
return "StrictMode";
case B:
return "Suspense";
case Z:
return "SuspenseList";
case K:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case _:
return "Portal";
case X:
return (e.displayName || "Context") + ".Provider";
case G:
return (e._context.displayName || "Context") + ".Consumer";
case H:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Q:
return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
case Y:
r = e._payload, e = e._init;
try {
return a(e(r));
} catch {
}
}
return null;
}
function l(e) {
return "" + e;
}
function i(e) {
try {
l(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), l(e);
}
}
function m(e) {
if (e === p) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === Y)
return "<...>";
try {
var r = a(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function s() {
var e = j.A;
return e === null ? null : e.getOwner();
}
function u() {
return Error("react-stack-top-frame");
}
function E(e) {
if (I.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function c(e, r) {
function t() {
$ || ($ = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function O() {
var e = a(this.type);
return D[e] || (D[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function b(e, r, t, n, d, f, w, y) {
return t = f.ref, e = {
$$typeof: T,
type: e,
key: r,
props: f,
_owner: d
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: O
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: w
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: y
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function g(e, r, t, n, d, f, w, y) {
var o = r.children;
if (o !== void 0)
if (n)
if (re(o)) {
for (n = 0; n < o.length; n++)
A(o[n]);
Object.freeze && Object.freeze(o);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else A(o);
if (I.call(r, "key")) {
o = a(e);
var v = Object.keys(r).filter(function(te) {
return te !== "key";
});
n = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", W[o + n] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
n,
o,
v,
o
), W[o + n] = !0);
}
if (o = null, t !== void 0 && (i(t), o = "" + t), E(r) && (i(r.key), o = "" + r.key), "key" in r) {
t = {};
for (var N in r)
N !== "key" && (t[N] = r[N]);
} else t = r;
return o && c(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), b(
e,
o,
f,
d,
s(),
t,
w,
y
);
}
function A(e) {
typeof e == "object" && e !== null && e.$$typeof === T && e._store && (e._store.validated = 1);
}
var R = ne, T = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), X = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), Y = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), j = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, P = console.createTask ? console.createTask : function() {
return null;
};
R = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var $, D = {}, F = R["react-stack-bottom-frame"].bind(
R,
u
)(), M = P(m(u)), W = {};
x.Fragment = p, x.jsx = function(e, r, t, n, d) {
var f = 1e4 > j.recentlyCreatedOwnerStacks++;
return g(
e,
r,
t,
!1,
n,
d,
f ? Error("react-stack-top-frame") : F,
f ? P(m(e)) : M
);
}, x.jsxs = function(e, r, t, n, d) {
var f = 1e4 > j.recentlyCreatedOwnerStacks++;
return g(
e,
r,
t,
!0,
n,
d,
f ? Error("react-stack-top-frame") : F,
f ? P(m(e)) : M
);
};
}()), x;
}
var q;
function ue() {
return q || (q = 1, process.env.NODE_ENV === "production" ? h.exports = ae() : h.exports = se()), h.exports;
}
var C = ue();
const J = ({ texts: a = ["Hello"], speed: l = 100, pause: i = 1500, loop: m = !0, className: s = "" }) => {
const [u, E] = S(0), [c, O] = S(0), [b, g] = S(!1), [A, R] = S("");
return oe(() => {
const T = a[u % a.length];
let _;
return !b && c < T.length ? _ = setTimeout(() => {
R(T.substring(0, c + 1)), O(c + 1);
}, l) : b && c > 0 ? _ = setTimeout(() => {
R(T.substring(0, c - 1)), O(c - 1);
}, l / 2) : _ = setTimeout(() => {
g(!b), b && m && E((p) => (p + 1) % a.length);
}, i), () => clearTimeout(_);
}, [c, b, u, m, i, l, a]), /* @__PURE__ */ C.jsxs("span", { className: `typewriter-classic ${s}`, children: [
A,
/* @__PURE__ */ C.jsx("span", { className: "blinking-cursor", children: "|" })
] });
}, ce = {
classic: J
// fade: Fade ,
// zoom: Zoom,
// bounce: Bounce,
// wave: Wave,
// flip: Flip,
// 'slide-left': SlideLeft,
// 'slide-up': SlideUp,
// glitch: Glitch,
// 'scale-pulse': ScalePulse,
// rotate: Rotate,
// scramble: Scramble,
// rainfall: Rainfall,
// 'neon-glow': NeonGlow,
// terminal: Terminal,
}, ie = ({ variant: a, ...l }) => {
const i = ce[a] || J;
return /* @__PURE__ */ C.jsx(i, { ...l });
};
export {
ie as default
};