textimation 0.1.2 → 0.1.4

package/README.md

@@ -12,6 +12,21 @@ bun add textimation
 
 First, import the styles and the `AnimatedText` component:
 
+- You can use `.textimation-incorrectChar` to style the incorrect characters.
+- You can use `.textimation-correctChar` to style the correct characters.
+
+```css
+.textimation-correctChar {
+	transition: all 0.2s ease-in-out;
+	opacity: 1;
+}
+
+.textimation-incorrectChar {
+	transition: all 0.2s ease-in-out;
+	opacity: 0.2;
+}
+```
+
 ```tsx
 import 'textimation/styles.css';
 import { AnimatedText } from 'textimation';

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-interface AnimatedTextProps {
+import { ElementType, ReactNode } from "react";
+interface TextimationProps {
 	text: string;
 	animationSpeed?: number;
 	className?: string;
 	keepCorrectChars?: boolean;
-	Comp?: React.ElementType;
+	Comp?: ElementType;
 }
-declare function AnimatedText({ text, animationSpeed, className, keepCorrectChars, Comp }: AnimatedTextProps): React.ReactNode;
-export { AnimatedText };
+declare function Textimation({ text, animationSpeed, className, keepCorrectChars, Comp }: TextimationProps): ReactNode;
+export { Textimation };

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useEffect as b,useMemo as x,useRef as c,useState as y}from"react";import{useIntersectionObserver as N}from"usehooks-ts";function R(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as A,jsxs as O}from"react/jsx-runtime";function v({text:e,animationSpeed:r=50,className:u="",keepCorrectChars:n=!1,Comp:M="span"}){let{isIntersecting:h,ref:C}=N({threshold:0}),[l,m]=y("idle"),f=c(e.replace(/\s/g," ").replace(/\S/g," ").split("")),i=c(null),s=c(""),p=c(null),g=x(()=>{return h||l==="animating"},[h,l]);return b(()=>{if(!g)return;if(e===s.current)return;m("animating");let d=s.current,S=Math.max(d.length,e.length),a=Array.from({length:S},(t,o)=>{if(n&&d[o]===e[o])return-1;if(d.length===0&&e[o]===" ")return 1;return Math.max(5,Math.ceil(Math.random()*20))});function T(){if(a.every((t)=>t<0)){if(f.current=e.split(""),i.current)i.current.textContent=e;s.current=e,m("finished");return}for(let t=0;t<a.length;t++){if(a[t]===-1)continue;a[t]--}if(i.current)H(f.current,a,e),i.current.innerHTML=f.current.map((t,o)=>{if(t===e[o])return`<span>${t}</span>`;else return`<span class="textimation-incorrectChar">${t}</span>`}).join("");p.current=setTimeout(T,r)}return T(),()=>{if(m("idle"),s.current=e,p.current)clearTimeout(p.current)}},[e,r,n,g]),O(M,{ref:C,style:{position:"relative"},className:u,children:[l==="idle"&&A("span",{className:"textimation-hiddenText",children:e}),A("span",{ref:i})]})}function H(e,r,u){for(let n=0;n<r.length;n++)switch(r[n]){case-1:break;case 0:e[n]=u[n];break;default:e[n]=R();break}}export{v as AnimatedText};
+import{useEffect as N,useMemo as b,useRef as u,useState as v}from"react";import{useIntersectionObserver as x}from"usehooks-ts";function M(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as y,jsxs as P}from"react/jsx-runtime";var H={position:"relative"},_={position:"absolute",inset:0,opacity:0};function I({text:e,animationSpeed:a=50,className:m="",keepCorrectChars:n=!1,Comp:A="span"}){let{isIntersecting:T,ref:L}=x({threshold:0}),[f,p]=v("idle"),c=u(e.replace(/\s/g," ").replace(/\S/g," ").split("")),o=u(null),l=u(""),h=u(null),C=b(()=>{return T||f==="animating"},[T,f]);return N(()=>{if(!C)return;if(e===l.current)return;p("animating");let d=l.current,E=Math.max(d.length,e.length),s=Array.from({length:E},(t,r)=>{if(n&&d[r]===e[r])return-1;if(d.length===0&&e[r]===" ")return 1;return Math.max(5,Math.ceil(Math.random()*20))}),S=!0;function R(){if(!o.current)return;if(s.every((t)=>t<0)){c.current=e.split(""),o.current.textContent=e,l.current=e,p("finished");return}for(let t=0;t<s.length;t++){if(s[t]===-1)continue;s[t]--}if(O(c.current,s,e),S)S=!1,o.current.innerHTML=c.current.map((t,r)=>{if(t===void 0)return"";else if(t===e[r])return`<span class="textimation-correctChar">${t}</span>`;else return`<span class="textimation-incorrectChar">${t}</span>`}).join("");else{let t=o.current.children;for(let r=0;r<t.length;r++){let i=t[r],g=c.current[r];if(!g){i.remove();continue}if(i.innerText=g,g===e[r])i.classList.add("textimation-correctChar"),i.classList.remove("textimation-incorrectChar");else i.classList.add("textimation-incorrectChar"),i.classList.remove("textimation-correctChar")}}h.current=setTimeout(R,a)}return R(),()=>{if(p("idle"),l.current=e,h.current)clearTimeout(h.current)}},[e,a,n,C]),P(A,{ref:L,style:H,className:m,children:[f==="idle"&&y("span",{style:_,children:e}),y("span",{ref:o})]})}function O(e,a,m){for(let n=0;n<a.length;n++)switch(a[n]){case-1:break;case 0:e[n]=m[n];break;default:e[n]=M();break}}export{I as Textimation};
 // built with love

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textimation",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Animated Text",
   "homepage": "https://github.com/TheeKia/textimation#readme",
   "bugs": {

package/dist/index.css

@@ -1 +0,0 @@
-.textimation-hiddenText{position:absolute;opacity:0;inset:0}.textimation-incorrectChar{opacity:.2}