Text Writer

1"use client";
2import React, { useEffect, useRef, useState } from "react";
3import { Easing, motion } from "motion/react";
4 
5interface TextWriterProps {
6  text: string;
7  delay?: number;
8  className?: string;
9  cursorColor?: string;
10  cursorWidth?: string;
11  cursorStyle?: string;
12  eraseOnComplete?: boolean;
13  eraseDelay?: number;
14  loop?: boolean;
15}
16 
17const TextWriter: React.FC<TextWriterProps> = ({
18  text,
19  delay = 0.05,
20  className = "",
21  cursorColor = "#000",
22  cursorWidth = "2px",
23  cursorStyle = "solid",
24  eraseOnComplete = false,
25  eraseDelay = 2000,
26  loop = false,
27}) => {
28  const [displayText, setDisplayText] = useState("");
29  const [isWriting, setIsWriting] = useState(true);
30  const textRef = useRef<HTMLSpanElement>(null);
31  const stepEasing: Easing = (t) => Math.floor(t * 2) / 2;
32 
33  useEffect(() => {
34    let timeoutId: NodeJS.Timeout;
35    let currentIndex = 0;
36 
37    const writeText = () => {
38      if (currentIndex <= text.length) {
39        setDisplayText(text.slice(0, currentIndex));
40        currentIndex++;
41        timeoutId = setTimeout(writeText, delay * 1000);
42      } else {
43        setIsWriting(false);
44        if (eraseOnComplete || loop) {
45          timeoutId = setTimeout(eraseText, eraseDelay);
46        }
47      }
48    };
49 
50    const eraseText = () => {
51      setIsWriting(true);
52      if (currentIndex > 0) {
53        currentIndex--;
54        setDisplayText(text.slice(0, currentIndex));
55        timeoutId = setTimeout(eraseText, delay * 1000);
56      } else {
57        if (loop) {
58          currentIndex = 0;
59          timeoutId = setTimeout(writeText, delay * 1000);
60        } else {
61          setIsWriting(false);
62        }
63      }
64    };
65 
66    writeText();
67 
68    return () => clearTimeout(timeoutId);
69  }, [text, delay, eraseOnComplete, eraseDelay, loop]);
70 
71  return (
72    <span className={`inline-flex items-center ${className}`}>
73      <span ref={textRef}>{displayText}</span>
74      {isWriting && (
75        <motion.span
76          style={{
77            width: cursorWidth,
78            height: "1em",
79            backgroundColor: cursorColor,
80            display: "inline-block",
81            borderStyle: cursorStyle,
82            marginLeft: "1px",
83          }}
84          animate={{ opacity: [1, 0] }}
85          transition={{
86            duration: 0.8,
87            repeat: Infinity,
88            ease: stepEasing,
89          }}
90        />
91      )}
92    </span>
93  );
94};
95 
96export default TextWriter;