react-typing-animator/dist/index.cjs.js

A React component that animates a given text array into a looping typing animation of each word.

"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},t.apply(this,arguments)};module.exports=function(n){var r=n.textArray,o=n.cursorColor,c=void 0===o?"black":o,a=n.textColor,i=void 0===a?"black":a,l=n.fontSize,u=void 0===l?"1rem":l,s=n.typingSpeed,f=void 0===s?200:s,v=n.delaySpeed,d=void 0===v?1500:v,p=n.backspace,h=void 0!==p&&p,g=n.height,y=void 0===g?"40px":g,m=n.loop,S=void 0===m||m,b=n.dynamicDelay,E=void 0!==b&&b,k=n.displayCursor,x=void 0===k||k,C=n.style,O=void 0===C?{}:C,j=e.useState(""),z=j[0],I=j[1],N=e.useState(0),T=N[0],q=N[1],w=e.useState(!0),A=w[0],D=w[1],H=e.useState(!1),P=H[0],R=H[1],B=e.useState(!1),F=B[0],G=B[1],J=e.useRef(null);return e.useEffect((function(){if(!P&&!F){return J.current=setInterval((function(){A?z===r[T]?R(!0):I(r[T].slice(0,z.length+1)):""===z?D(!0):I(z.slice(0,z.length-1))}),f),function(){J.current&&clearInterval(J.current)}}}),[z,A,f,P,F,T,r]),e.useEffect((function(){if(P){var e=setTimeout((function(){var e=T===r.length-1;S||!e||h&&(!h||A)?(q((function(e){return(e+1)%r.length})),D(!h),I(h?z:""),R(!1)):G(!0)}),E?d+50*z.length:d);return function(){return clearTimeout(e)}}}),[P,T,h,r.length,d,E,z,S,A]),e.createElement("div",{className:"typing-container",style:t({fontSize:u,color:i,height:y,lineHeight:y},O)},e.createElement("span",null,z),x&&!F&&e.createElement("span",{className:"cursor",style:{backgroundColor:c,height:"calc(".concat(u," * 1.2)"),top:"calc((".concat(y," - ").concat(u," * 1.2) /2)")}}))};
//# sourceMappingURL=index.cjs.js.map