typingfx/dist/index.js

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

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