typingfx
Version:
Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.
2 lines (1 loc) • 2.67 kB
JavaScript
import{isValidElement as w}from"react";var r={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"};import{jsx as y,jsxs as N}from"react/jsx-runtime";var H=(t,i)=>{let n=e=>{var p;if(Array.isArray(e))return e.map(n);if(typeof e=="string")return e.trim().split(" ").map((o,s)=>N("span",{className:r.word,children:[o,"\xA0"]},o+s));if(typeof e=="number"){let[o,s]=e>0?[e,0]:[0,-e];return y("span",{className:[r.word,r.wait].join(" "),style:{"--d":`${o}ms`,"--r":`${s}ms`},children:"\xA0"},crypto.randomUUID())}if(w(e)){let{type:o,props:s}=e,a=typeof o=="string"?{className:[r.hk,s.className].join(" ")}:{};return o instanceof Function||s["data-tfx"]&&i?i?y(i.wrapper,{...i.props,className:[r.component,r.hk,(p=i.props)==null?void 0:p.className].join(" "),children:e},crypto.randomUUID()):n(o(s)):y(o,{...s,...a,children:n(s.children)},crypto.randomUUID())}return e};return t.map(n)},L=(t,i)=>{var e,p;i.push(t);let n=t;t.classList.contains(r.component)||(n.classList.contains(r.hk)?n.style.setProperty("--n","0"):n.classList.contains(r.word)&&(n.style.setProperty("--n",`${(p=(e=n.textContent)==null?void 0:e.length)!=null?p:0}`),n.style.setProperty("--w",`${n.offsetWidth}px`)),Array.from(t.children).forEach(o=>L(o,i)))},M=t=>Array.from(t.children).map(i=>{let n=[];return L(i,n),n}),k=t=>{let i=[];for(let n=0;n<t.length;n++){let e=t[n],p=t[(n+1)%t.length],o=0;for(;o<e.length&&o<p.length;o++){let s=e[o].classList.contains(r.word),a=p[o].classList.contains(r.word);if(!(s&&a&&e[o].textContent===p[o].textContent)&&(s||a))break}i.push(o)}return i},d=t=>{t.style.width=t.style.getPropertyValue("--w"),t.classList.remove(r.type,r.hk)},g=t=>{t.style.width="0",t.classList.remove(r.del),t.classList.contains(r.word)||t.classList.add(r.hk)},S=(t,i,n)=>{let e=k(t),p=0;for(;p<t.length&&t[p].length===e[p];)p++;if(p===t.length)return;let o=0;for(let s=0;s<t.length;s++)for(let a=0;a<t[s].length;a++){let f=t[s][a],u=t[s][a+1],m=t[s][a-1];f.onanimationend=E=>{if(E.stopPropagation(),f.classList.contains(r.type))d(f),u?(d(u),u.classList.add(r.type)):s!==t.length-1||o++<i?f.classList.add(r.del):n||f.classList.add(r.cursor);else if(g(f),a===t[s].length-1&&t[s].length===e[s]||a===e[s]){let c=(s+1)%t.length;for(;t[c].length===e[c];)c=(c+1)%t.length;c===s&&(c=(t.length+c-1)%t.length);let h=t[c];for(let l=0;l<a;l++)d(h[l]);for(let l=0;l<a;l++)g(t[s][l]);let x=h[h[a]?a:a-1];d(x),x.classList.add(r.type)}else m&&m.classList.add(r.del)}}};export{r as a,H as b,M as c,d,g as e,S as f};