typewritter-text

1import { motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface TypewriterTextProps {
6  words: string[];
7  className?: string;
8  typingSpeed?: number;
9  deletingSpeed?: number;
10  pauseDuration?: number;
11  cursorClassName?: string;
12}
13 
14const TypewriterText = React.forwardRef<HTMLSpanElement, TypewriterTextProps>(
15  (
16    {
17      words,
18      className,
19      typingSpeed = 100,
20      deletingSpeed = 50,
21      pauseDuration = 1500,
22      cursorClassName,
23    },
24    ref,
25  ) => {
26    const [currentWordIndex, setCurrentWordIndex] = React.useState(0);
27    const [currentText, setCurrentText] = React.useState("");
28    const [isDeleting, setIsDeleting] = React.useState(false);
29 
30    React.useEffect(() => {
31      const currentWord = words[currentWordIndex] || "";
32 
33      const timeout = setTimeout(
34        () => {
35          if (!isDeleting) {
36            if (currentText.length < currentWord.length) {
37              setCurrentText(currentWord.slice(0, currentText.length + 1));
38            } else {
39              setTimeout(() => setIsDeleting(true), pauseDuration);
40            }
41          } else {
42            if (currentText.length > 0) {
43              setCurrentText(currentText.slice(0, -1));
44            } else {
45              setIsDeleting(false);
46              setCurrentWordIndex((prev) => (prev + 1) % words.length);
47            }
48          }
49        },
50        isDeleting ? deletingSpeed : typingSpeed,
51      );
52 
53      return () => clearTimeout(timeout);
54    }, [
55      currentText,
56      isDeleting,
57      currentWordIndex,
58      words,
59      typingSpeed,
60      deletingSpeed,
61      pauseDuration,
62    ]);
63 
64    return (
65      <span ref={ref} className={cn("inline-block", className)}>
66        {currentText}
67        <motion.span
68          animate={{ opacity: [1, 0] }}
69          transition={{
70            duration: 0.5,
71            repeat: Infinity,
72            repeatType: "reverse",
73          }}
74          className={cn(
75            "ml-0.5 inline-block h-[1em] w-[2px] bg-current align-middle",
76            cursorClassName,
77          )}
78        />
79      </span>
80    );
81  },
82);
83TypewriterText.displayName = "TypewriterText";
84 
85export { TypewriterText };