retro-react/dist/esm/components/typewritertext/TypewriterText.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as r,useState as t,useRef as n,useCallback as u,useEffect as s}from"react";import{jsxs as c,jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as o}from"../../utils/classNames.js";import{Text as a}from"../text/Text.js";const m=r(((r,m)=>{var{id:l,className:p,text:d,typingSpeed:T=100,erasingSpeed:x=50,repeat:g=!1,pauseDuration:h=2e3,restartPause:f=1e3,showCursor:j=!0,cursor:y="|",color:w="#000000",sx:N}=r,S=e(r,["id","className","text","typingSpeed","erasingSpeed","repeat","pauseDuration","restartPause","showCursor","cursor","color","sx"]);const[b,v]=t(""),[C,O]=t(!0),[_,D]=t(!0),P=n(null),F=n(null),H=n(0),k=n(!0),q=u((()=>{P.current&&(clearTimeout(P.current),P.current=null),F.current&&(clearTimeout(F.current),F.current=null)}),[]),z=u((()=>{if(!j||!k.current)return;const e=()=>{k.current&&(D((e=>!e)),F.current=setTimeout(e,530))};F.current=setTimeout(e,530)}),[j]),A=u((()=>{if(!k.current)return;const e=H.current;C?e<=d.length&&(v(d.slice(0,e)),H.current=e+1,e<d.length?P.current=setTimeout(A,T):g&&(P.current=setTimeout((()=>{O(!1),A()}),h))):e>=0&&(v(d.slice(0,e)),H.current=e-1,P.current=e>0?setTimeout(A,x):setTimeout((()=>{O(!0),H.current=0,A()}),f))}),[d,T,x,h,f,g,C]);return s((()=>(k.current=!0,H.current=0,v(""),O(!0),z(),P.current=setTimeout(A,T),()=>{k.current=!1,q()})),[d,A,z,T,q]),s((()=>{j&&k.current?z():(F.current&&(clearTimeout(F.current),F.current=null),D(!1))}),[j,z]),c(a,Object.assign({ref:m,id:l,color:w,className:o("typewriter-text-root",p)},S,{sx:Object.assign({fontFamily:"'Courier New', monospace",minHeight:"1.2em",whiteSpace:"pre-wrap"},N)},{children:[b,j&&i("span",Object.assign({style:{opacity:_?1:0,transition:"none"}},{children:y}),void 0)]}),void 0)}));m.displayName="TypewriterText";export{m as TypewriterText};