react-typing-animator/dist/index.js

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

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