react-simple-typewriter/dist/index.js

A simple react component for adding a nice typewriter effect to your project.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=function(){return r=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},r.apply(this,arguments)};function o(e,t){var o,n;switch(t.type){case"TYPE":return r(r({},e),{speed:t.speed,text:null===(o=t.payload)||void 0===o?void 0:o.substring(0,e.text.length+1)});case"DELAY":return r(r({},e),{speed:t.payload});case"DELETE":return r(r({},e),{speed:t.speed,text:null===(n=t.payload)||void 0===n?void 0:n.substring(0,e.text.length-1)});case"COUNT":return r(r({},e),{count:e.count+1});default:return e}}var n=function(e){var r=e.words,n=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,i=e.loop,s=void 0===i?1:i,u=e.typeSpeed,l=void 0===u?80:u,c=e.deleteSpeed,d=void 0===c?50:c,a=e.delaySpeed,p=void 0===a?1500:a,y=e.onLoopDone,f=e.onType,v=e.onDelete,m=e.onDelay,h=t.useReducer(o,{speed:l,text:"",count:0}),T=h[0],g=T.speed,_=T.text,x=T.count,D=h[1],C=t.useRef(0),E=t.useRef(!1),S=t.useRef(!1),b=t.useRef(!1),k=t.useRef(!1),w=t.useCallback((function(){var e=x%n.length,t=n[e];S.current?(D({type:"DELETE",payload:t,speed:d}),""===_&&(S.current=!1,D({type:"COUNT"}))):(D({type:"TYPE",payload:t,speed:l}),b.current=!0,_===t&&(D({type:"DELAY",payload:p}),b.current=!1,k.current=!0,setTimeout((function(){k.current=!1,S.current=!0}),p),s>0&&(C.current+=1,C.current/n.length===s&&(k.current=!1,E.current=!0)))),b.current&&f&&f(C.current),S.current&&v&&v(),k.current&&m&&m()}),[x,p,d,s,l,n,_,f,v,m]);return t.useEffect((function(){var e=setTimeout(w,g);return E.current&&clearTimeout(e),function(){return clearTimeout(e)}}),[w,g]),t.useEffect((function(){y&&E.current&&y()}),[y]),[_,{isType:b.current,isDelay:k.current,isDelete:S.current,isDone:E.current}]};var i="styles-module_blinkingCursor__yugAC",s="styles-module_blinking__9VXRT";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".styles-module_blinkingCursor__yugAC{color:inherit;font:inherit;left:3px;line-height:inherit;opacity:1;position:relative;top:0}.styles-module_blinking__9VXRT{animation-duration:.8s;animation-iteration-count:infinite;animation-name:styles-module_blink__rqfaf}@keyframes styles-module_blink__rqfaf{0%{opacity:1}to{opacity:0}}");var u=t.memo((function(t){var o=t.cursorBlinking,n=void 0===o||o,u=t.cursorStyle,l=void 0===u?"|":u,c=t.cursorColor,d=void 0===c?"inherit":c;return e.jsx("span",r({style:{color:d},className:"".concat(i," ").concat(n?s:"")},{children:l}))}));exports.Cursor=u,exports.Typewriter=function(t){var r=t.words,o=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,i=t.loop,s=void 0===i?1:i,l=t.typeSpeed,c=void 0===l?80:l,d=t.deleteSpeed,a=void 0===d?50:d,p=t.delaySpeed,y=void 0===p?1500:p,f=t.cursor,v=void 0!==f&&f,m=t.cursorStyle,h=void 0===m?"|":m,T=t.cursorColor,g=void 0===T?"inherit":T,_=t.cursorBlinking,x=void 0===_||_,D=t.onLoopDone,C=t.onType,E=t.onDelay,S=t.onDelete,b=n({words:o,loop:s,typeSpeed:c,deleteSpeed:a,delaySpeed:y,onLoopDone:D,onType:C,onDelay:E,onDelete:S})[0];return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:b}),v&&e.jsx(u,{cursorStyle:h,cursorColor:g,cursorBlinking:x})]})},exports.useTypewriter=n;
//# sourceMappingURL=index.js.map