typingfx/dist/client/index.js

Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.

"use client";
"use strict";var T=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var R=(t,s)=>{for(var o in s)T(t,o,{get:s[o],enumerable:!0})},I=(t,s,o,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of O(s))!D.call(t,i)&&i!==o&&T(t,i,{get:()=>s[i],enumerable:!(n=C(s,i))||n.enumerable});return t};var U=t=>I(T({},"__esModule",{value:!0}),t);var q={};R(q,{TypeOut:()=>$});module.exports=U(q);var u=require("react");var e={typeout:"tfx_typeout",word:"tfx_word",hk:"tfx_hk",processing:"tfx_processing",type:"tfx_type",del:"tfx_del",wait:"tfx_wait",cursor:"tfx_cursor",blink:"tfx_blink",paused:"tfx_paused",component:"tfx_component",fadein:"tfx_fadein",fadeout:"tfx_fadeout"};var y=require("react/jsx-runtime"),A=(t,s)=>{let o=n=>{var i;if(Array.isArray(n))return n.map(o);if(typeof n=="string")return n.trim().split(" ").map((a,r)=>(0,y.jsxs)("span",{className:e.word,children:[a,"\xA0"]},a+r));if(typeof n=="number"){let[a,r]=n>0?[n,0]:[0,-n];return(0,y.jsx)("span",{className:[e.word,e.wait].join(" "),style:{"--d":`${a}ms`,"--r":`${r}ms`},children:"\xA0"},crypto.randomUUID())}if((0,u.isValidElement)(n)){let{type:a,props:r}=n,p=typeof a=="string"?{className:[e.hk,r.className].join(" ")}:{};return a instanceof Function||r["data-tfx"]&&s?s?(0,y.jsx)(s.wrapper,{...s.props,className:[e.component,e.hk,(i=s.props)==null?void 0:i.className].join(" "),children:n},crypto.randomUUID()):o(a(r)):(0,y.jsx)(a,{...r,...p,children:o(r.children)},crypto.randomUUID())}return n};return t.map(o)},N=(t,s)=>{var n,i;s.push(t);let o=t;t.classList.contains(e.component)||(o.classList.contains(e.hk)?o.style.setProperty("--n","0"):o.classList.contains(e.word)&&(o.style.setProperty("--n",`${(i=(n=o.textContent)==null?void 0:n.length)!=null?i:0}`),o.style.setProperty("--w",`${o.offsetWidth}px`)),Array.from(t.children).forEach(a=>N(a,s)))},S=t=>Array.from(t.children).map(s=>{let o=[];return N(s,o),o}),j=t=>{let s=[];for(let o=0;o<t.length;o++){let n=t[o],i=t[(o+1)%t.length],a=0;for(;a<n.length&&a<i.length;a++){let r=n[a].classList.contains(e.word),p=i[a].classList.contains(e.word);if(!(r&&p&&n[a].textContent===i[a].textContent)&&(r||p))break}s.push(a)}return s},E=t=>{t.style.width=t.style.getPropertyValue("--w"),t.classList.remove(e.type,e.hk)},b=t=>{t.style.width="0",t.classList.remove(e.del),t.classList.contains(e.word)||t.classList.add(e.hk)},H=(t,s,o)=>{let n=j(t),i=0;for(;i<t.length&&t[i].length===n[i];)i++;if(i===t.length)return;let a=0;for(let r=0;r<t.length;r++)for(let p=0;p<t[r].length;p++){let f=t[r][p],_=t[r][p+1],g=t[r][p-1];f.onanimationend=v=>{if(v.stopPropagation(),f.classList.contains(e.type))E(f),_?(E(_),_.classList.add(e.type)):r!==t.length-1||a++<s?f.classList.add(e.del):o||f.classList.add(e.cursor);else if(b(f),p===t[r].length-1&&t[r].length===n[r]||p===n[r]){let m=(r+1)%t.length;for(;t[m].length===n[m];)m=(m+1)%t.length;m===r&&(m=(t.length+m-1)%t.length);let x=t[m];for(let c=0;c<p;c++)E(x[c]);for(let c=0;c<p;c++)b(t[r][c]);let w=x[x[p]?p:p-1];E(w),w.classList.add(e.type)}else g&&g.classList.add(e.del)}}};var F={children:"",speed:20,delSpeed:40,noCursor:!1,noCursorAfterAnimEnd:!1,steps:[""],repeat:1/0,force:!1,paused:!1},V=({children:t,className:s,componentAnimation:o,delSpeed:n,noCursor:i,noCursorAfterAnimEnd:a,repeat:r,speed:p,steps:f,style:_,paused:g,...v})=>{let[m,x]=(0,u.useState)(!0),w=(0,u.useMemo)(()=>{let l=t?[...f,t]:f;return l.length<2&&l.unshift("",""),A(l,o)},[t,f,o]),c=(0,u.useRef)(null);return(0,u.useEffect)(()=>{x(!0);let l;return requestAnimationFrame(()=>{if(c.current){l=S(c.current);for(let d=0;d<l[0].length;d++){let h=l[0][d],k=l[0][d+1];h.onanimationend=P=>{P.stopPropagation(),h.style.width=h.style.getPropertyValue("--w"),h.classList.remove(e.type,e.hk),k?k.classList.add(e.type):(H(l,r,a),h.classList.add(e.del))}}requestAnimationFrame(()=>l[0][0].classList.add(e.type)),x(!1)}}),()=>l==null?void 0:l.flat().forEach(d=>d.onanimationend=null)},[w,r,a]),(0,u.useEffect)(()=>{var d;if(g)return(d=c.current)==null||d.classList.add(e.paused),()=>null;let l=()=>{var h;(h=c.current)==null||h.classList[document.visibilityState==="visible"?"remove":"add"](e.paused)};return l(),addEventListener("visibilitychange",l),()=>removeEventListener("visibilitychange",l)},[g]),(0,y.jsx)("div",{...v,className:[s,e.typeout,m?e.processing:"",i?"":e.cursor].join(" "),ref:c,style:{"--speed":p,"--delSpeed":n,..._},children:w.map((l,d)=>(0,y.jsx)("div",{className:e.hk,children:l},d))})},$=t=>{let{children:s,force:o,steps:n,...i}={...F,...t},[a,r]=(0,u.useState)(!1);return(0,u.useEffect)(()=>{let p=window.matchMedia("(prefers-reduced-motion: reduce)"),f=()=>r(p.matches);return f(),p.addEventListener("change",f),()=>p.removeEventListener("change",f)},[]),!o&&a?(0,y.jsx)("div",{...i,children:n[n.length-1]||s||n[0]}):(0,y.jsx)(V,{...i,children:s,steps:n})};0&&(module.exports={TypeOut});