docs(changeset): Add option to control cursor visibility after compliting the type animation

Author: mayank1513

.changeset/eleven-cups-change.md

@@ -0,0 +1,5 @@
+---
+"typingfx": minor
+---
+
+Add option to control cursor visibility after compliting the type animation

lib/src/client/type-out/type-out.tsx

@@ -19,6 +19,9 @@ interface DefaultTypeOutProps extends HTMLProps<HTMLDivElement> {
   /** Whether to hide the blinking cursor. @default false */
   noCursor: boolean;
 
+  /** Whether to hide the blinking cursor after completing the anim. @default false */
+  noCursorAfterAnimEnd: false;
+
   /** Sequence of steps (lines or phrases) to animate through. */
   steps: ReactNode[];
 
@@ -37,6 +40,7 @@ const defaultTypeOutProps: DefaultTypeOutProps = {
   speed: 20,
   delSpeed: 40,
   noCursor: false,
+  noCursorAfterAnimEnd: false,
   steps: [""],
   repeat: Infinity,
   force: false,
@@ -50,6 +54,7 @@ const TypingAnimation = ({
   className,
   delSpeed,
   noCursor,
+  noCursorAfterAnimEnd,
   repeat,
   speed,
   steps,
@@ -102,15 +107,15 @@ const TypingAnimation = ({
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         nextEl
           ? nextEl.classList.add(styles.type)
-          : (addAnimationListeners(elements as HTMLElement[][], repeat),
+          : (addAnimationListeners(elements as HTMLElement[][], repeat, noCursorAfterAnimEnd),
             el.classList.add(styles.del));
       };
       el.addEventListener("animationend", animListener);
     }
 
     requestAnimationFrame(() => elements[0][0].classList.add(styles.type));
     setProcessing(false);
-  }, [animatedSteps, delSpeed, repeat, speed]);
+  }, [animatedSteps, repeat, noCursorAfterAnimEnd]);
 
   // Respect pause and pause on visibility hidden
   useEffect(() => {

lib/src/client/type-out/utils.tsx

@@ -97,7 +97,11 @@ const updateAfterDelAnim = (el: HTMLElement) => {
 /**
  * Handles the chain of animation listeners for typing + deleting effects across steps.
  */
-export const addAnimationListeners = (elements: HTMLElement[][], repeat: number) => {
+export const addAnimationListeners = (
+  elements: HTMLElement[][],
+  repeat: number,
+  noCursorAfterAnimEnd: boolean,
+) => {
   const stepStartIndices = compareSteps(elements);
   let iCheck = 0;
   while (iCheck < elements.length && elements[iCheck].length === stepStartIndices[iCheck]) iCheck++;
@@ -122,7 +126,7 @@ export const addAnimationListeners = (elements: HTMLElement[][], repeat: number)
           if (nextEl) nextEl.classList.add(styles.type);
           else if (i !== elements.length - 1 || repeatCount++ < repeat)
             el.classList.add(styles.del);
-          else el.classList.add(styles.cursor);
+          else if (!noCursorAfterAnimEnd) el.classList.add(styles.cursor);
         } else {
           updateAfterDelAnim(el);
           if (