textimation 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # textimation
 
-Animated Text
+A simple React component for animating text with typewriter-like effects.
 
 ## Installation
 
@@ -10,12 +10,23 @@ bun add textimation
 
 ## Usage
 
+First, import the styles and the `AnimatedText` component:
+
+- You can use `.textimation-incorrectChar` to style the incorrect characters.
+
 ```tsx
 import 'textimation/styles.css';
-import { Button } from 'textimation';
+import { AnimatedText } from 'textimation';
 
 function App() {
-  return <Button>Click me</Button>;
+	return (
+		<AnimatedText
+			text="Hello, world!"
+			Comp="p"
+			animationSpeed={30}
+			keepCorrectChars
+		/>
+	);
 }
 ```
 
@@ -25,4 +36,4 @@ Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.
 
 ## License
 
-MIT
+MIT License

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-interface AnimatedTextProps {
+interface TextimationProps {
 	text: string;
 	animationSpeed?: number;
 	className?: string;
 	keepCorrectChars?: boolean;
 	Comp?: React.ElementType;
 }
-declare function AnimatedText({ text, animationSpeed, className, keepCorrectChars, Comp }: AnimatedTextProps): React.ReactNode;
-export { AnimatedText };
+declare function Textimation({ text, animationSpeed, className, keepCorrectChars, Comp }: TextimationProps): React.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 b,useMemo as y,useRef as u,useState as N}from"react";import{useIntersectionObserver as v}from"usehooks-ts";function T(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as M,jsxs as k}from"react/jsx-runtime";function H({text:e,animationSpeed:r=50,className:c="",keepCorrectChars:n=!1,Comp:A="span"}){let{isIntersecting:h,ref:C}=v({threshold:0}),[l,m]=N("idle"),f=u(e.replace(/\s/g," ").replace(/\S/g," ").split("")),i=u(null),s=u(""),p=u(null),d=y(()=>{return h||l==="animating"},[h,l]);return b(()=>{if(!d)return;if(e===s.current)return;m("animating");let g=s.current,S=Math.max(g.length,e.length),a=Array.from({length:S},(t,o)=>{if(n&&g[o]===e[o])return-1;if(g.length===0&&e[o]===" ")return 1;return Math.max(5,Math.ceil(Math.random()*20))});function R(){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)O(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(R,r)}return R(),()=>{if(m("idle"),s.current=e,p.current)clearTimeout(p.current)}},[e,r,n,d]),k(A,{ref:C,style:{position:"relative"},className:c,children:[l==="idle"&&M("span",{style:{position:"absolute",inset:0,opacity:0},children:e}),M("span",{ref:i})]})}function O(e,r,c){for(let n=0;n<r.length;n++)switch(r[n]){case-1:break;case 0:e[n]=c[n];break;default:e[n]=T();break}}export{H as Textimation};
 // built with love

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textimation",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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}