in-typing/dist/esm/index.js

Typing Animation Component for React

import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as r}from"react";function n({type:n,backspace:i,delay:l,duration:s,cursor:o}){const a="string"==typeof n?[n]:n,c="number"==typeof i?[i]:i,u=s||100,f=l||u,[g,h]=t(new Array(a.length).fill("")),[m,p]=t(0),[d,y]=t(!1),[b,x]=t(!0);return r(()=>{const e=setInterval(()=>{if(m<a.length&&!d){if(g[m]!==a[m]){const e=[...g];e[m]=a[m].substring(0,g[m].length+1),h(e),x(!0)}else if(g[m]===a[m]){if(c?.includes(m)){clearInterval(e);const t=setTimeout(()=>{y(!0)},f);return()=>{clearTimeout(t)}}p(m+1)}}else if(m<a.length&&d)if(g[m].length){const e=[...g];e[m]=a[m].substring(0,g[m].length-1),h(e),x(!0)}else y(!1),p(m+1)},u);return()=>{clearInterval(e)}},[g,m,d]),r(()=>(setTimeout(()=>{x(!b)},500),()=>{}),[b]),e("h1",{style:b&&o?{borderRight:`1px solid ${o}`,marginRight:"-1px"}:{},children:g})}export{n as default};