type-writer-words
Version:
Librería de efecto maquina de escribir con React
3 lines (2 loc) • 1.71 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";var i={default:"_",line:"|"};function o(o){var s=o.words,d=void 0===s?[]:s,l=o.cursor,c=void 0===l?"default":l,u=o.typingSpeed,a=void 0===u?100:u,f=o.deletingSpeed,m=void 0===f?100:f,p=o.wordPause,h=void 0===p?2e3:p,v=o.deletePause,y=void 0===v?2e3:v,g=o.color,x=void 0===g?"#000":g,T=n(""),b=T[0],C=T[1],N=n(0),S=N[0],k=N[1],w=n(!1),_=w[0],z=w[1];return r((function(){var e,t=d[S],n=function(){var r=_?t.substring(0,b.length-1):t.substring(0,b.length+1);C(r),_||r!==t?_&&""===r?(z(!1),k((function(e){return(e+1)%d.length})),e=setTimeout(n,y)):e=setTimeout(n,_?m:a):e=setTimeout((function(){return z(!0)}),h)};return e=setTimeout(n,_?m:a),function(){return clearTimeout(e)}}),[b,_,S,d,a,m,h]),e("div",{className:"efects_titles",children:[t("p",{id:"text",style:{color:x},children:b}),t("span",{id:"cursor",className:"cursor",style:{color:x},children:i[c]})]})}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".efects_titles {\r\n color: #000;\r\n display: flex;\r\n align-items: center;\r\n font-size: 30px;\r\n }\r\n .cursor {\r\n font-weight: bold;\r\n color: #101010;\r\n font-size: 30px;\r\n animation: blink 0.7s steps(1) infinite;\r\n }\r\n \r\n @keyframes blink {\r\n 50% {\r\n opacity: 0;\r\n }\r\n }");export{o as TypeWriter};
//# sourceMappingURL=index.mjs.map