@rusyar/react-typewriter/dist/esm/index.js

A React component with simple typewriting animation

'use client';
import e,{useState as r}from"react";var t,n,o,a={exports:{}},i={},s={},l=(o||(o=1,"production"===process.env.NODE_ENV?a.exports=function(){if(t)return i;t=1;var e=Symbol.for("react.transitional.element");function r(r,t,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in n={},t)"key"!==a&&(n[a]=t[a]);else n=t;return{$$typeof:e,type:r,key:o,ref:void 0!==(t=n.ref)?t:null,props:n}}return i.Fragment=Symbol.for("react.fragment"),i.jsx=r,i.jsxs=r,i}():(n||(n=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case m:return"Profiler";case d:return"StrictMode";case _:return"Suspense";case w:return"SuspenseList";case S:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case y:return"Portal";case g:return(e.displayName||"Context")+".Provider";case b:return(e._context.displayName||"Context")+".Consumer";case v:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case h:return null!==(t=e.displayName||null)?t:r(e.type)||"Memo";case k:t=e._payload,e=e._init;try{return r(e(t))}catch(e){}}return null}function t(e){try{var r=!1}catch(e){r=!0}if(r){var t=(r=console).error,n="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),""+e}}function n(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return E[e]||(E[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,n,o,i,s,u,y,p){var d,m,b,g,v,_,w=n.children;if(void 0!==w)if(i)if(O(w)){for(i=0;i<w.length;i++)l(w[i]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else l(w);if(N.call(n,"key")){w=r(e);var h=Object.keys(n).filter(function(e){return"key"!==e});$[w+(i=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}")]||(console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',i,w,h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",w),$[w+i]=!0)}if(w=null,void 0!==o&&(t(o),w=""+o),function(e){if(N.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(n)&&(t(n.key),w=""+n.key),"key"in n)for(var k in o={},n)"key"!==k&&(o[k]=n[k]);else o=n;return w&&function(e,r){function t(){c||(c=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),m=e,b=w,g=u,v=null===(d=x.A)?null:d.getOwner(),g=(_=o).ref,m={$$typeof:f,type:m,key:b,props:_,_owner:v},null!==(void 0!==g?g:null)?Object.defineProperty(m,"ref",{enumerable:!1,get:a}):Object.defineProperty(m,"ref",{enumerable:!1,value:null}),m._store={},Object.defineProperty(m._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(m,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(m,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.defineProperty(m,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:p}),Object.freeze&&(Object.freeze(m.props),Object.freeze(m)),m}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),y=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),b=Symbol.for("react.consumer"),g=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),_=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),h=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),S=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),x=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,O=Array.isArray,T=console.createTask?console.createTask:function(){return null},E={},P=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,o)(),R=T(n(o)),$={};s.Fragment=p,s.jsx=function(e,r,t,o,a){var s=1e4>x.recentlyCreatedOwnerStacks++;return i(e,r,t,!1,o,a,s?Error("react-stack-top-frame"):P,s?T(n(e)):R)},s.jsxs=function(e,r,t,o,a){var s=1e4>x.recentlyCreatedOwnerStacks++;return i(e,r,t,!0,o,a,s?Error("react-stack-top-frame"):P,s?T(n(e)):R)}}()),a.exports=s)),a.exports),c={"text-typing":"typewriter-module_text-typing__jW8uq",cursor:"typewriter-module_cursor__mYNKm",blink:"typewriter-module_blink__irvNq",expand:"typewriter-module_expand__afhU3"};!function(e,r){void 0===r&&(r={});var t=r.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".typewriter-module_text-typing__jW8uq{color:var(--rtw-color);font-family:var(--rtw-font-family);font-size:var(--rtw-font-size);font-weight:var(--rtw-font-weight);margin:0}.typewriter-module_cursor__mYNKm{background-image:linear-gradient(var(--rtw-cursor-color),var(--rtw-cursor-color));background-position:right 0 top 50%;background-repeat:no-repeat;background-size:var(--rtw-cursor-width) 80%;padding-right:var(--rtw-cursor-width)}.typewriter-module_blink__irvNq{animation:typewriter-module_cursor__mYNKm 1.2s step-start infinite}.typewriter-module_expand__afhU3{animation:typewriter-module_cursor__mYNKm 1s infinite}@keyframes typewriter-module_cursor__mYNKm{0%,to{background-size:var(--rtw-cursor-width) 0}50%{background-size:var(--rtw-cursor-width) 80%}}");let u=({text:r,tagName:t="span",size:n="1rem",fontFamily:o="inherit",weight:a=400,color:i="inherit",speed:s=100,delay:u=0,cursorAnimation:f="blink",cursorColor:y="black",cursorType:p="block",sync:d})=>{let[m,b]=e.useState(0),[g,v]=e.useState("paused"),_=e.useRef(null),w=r.substring(0,m),h=!d||d.order===d.syncState.turn,k=("typing"===g||"paused"===g)&&h,S="block"===p?`calc(${n} * 0.4)`:`calc(${n} * 0.07)`;return e.useEffect(()=>{let e=_.current;e&&(e.style.setProperty("--rtw-font-size",n),e.style.setProperty("--rtw-font-weight",`${a}`),e.style.setProperty("--rtw-font-family",o),e.style.setProperty("--rtw-color",i),e.style.setProperty("--rtw-cursor-color",y),e.style.setProperty("--rtw-cursor-width",S))},[S]),e.useEffect(()=>{m!==r.length&&(d&&d.syncState.turn!==d.order||"paused"!==g||(u>0?setTimeout(()=>{v("typing")},u):v("typing")))},[u,m,g,d,r]),e.useEffect(()=>{if("typing"!==g)return;let e=setTimeout(()=>{m<r.length&&b(e=>e+1),m===r.length&&(d?d.syncState.isLastTurn?v("paused"):(v("finished"),d.syncState.next(d.order)):v("paused"))},s);return()=>clearTimeout(e)},[r,s,m,g,d]),l.jsx(t,{ref:_,className:function(){for(var e,r,t=0,n="",o=arguments.length;t<o;t++)(e=arguments[t])&&(r=function e(r){var t,n,o="";if("string"==typeof r||"number"==typeof r)o+=r;else if("object"==typeof r)if(Array.isArray(r)){var a=r.length;for(t=0;t<a;t++)r[t]&&(n=e(r[t]))&&(o&&(o+=" "),o+=n)}else for(n in r)r[n]&&(o&&(o+=" "),o+=n);return o}(e))&&(n&&(n+=" "),n+=r);return n}(c["text-typing"],k&&c.cursor,"paused"===g&&c.blink,"paused"===g&&c[f]),children:w})},f=e=>{let[t,n]=r(1);return{turn:t,next:e=>{n(e+1)},total:e,isLastTurn:!!e&&t===e}};export{u as Typewriter,f as useSyncState};
//# sourceMappingURL=index.js.map