"use client";

import * as React from "react";
import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface TypingDeleteTextProps {
  texts: string[];
  className?: string;
  /**
   * Typing speed in milliseconds per character
   * @default 60
   */
  typingSpeed?: number;
  /**
   * Deleting speed in milliseconds per character
   * @default 40
   */
  deletingSpeed?: number;
  /**
   * Pause duration between typing and deleting in milliseconds
   * @default 1200
   */
  pauseDuration?: number;
  /**
   * Show blinking cursor
   * @default true
   */
  cursor?: boolean;
  /**
   * Cursor character
   * @default "|"
   */
  cursorChar?: string;
}

function TypingDeleteText({
  texts,
  className,
  typingSpeed = 60,
  deletingSpeed = 40,
  pauseDuration = 1200,
  cursor = true,
  cursorChar = "|",
}: TypingDeleteTextProps) {
  const [displayText, setDisplayText] = React.useState("");
  const [index, setIndex] = React.useState(0);
  const [isDeleting, setIsDeleting] = React.useState(false);

  React.useEffect(() => {
    if (!texts.length) return;
    const current = texts[index % texts.length];

    let timeout = typingSpeed;

    if (!isDeleting && displayText === current) {
      timeout = pauseDuration;
    } else if (isDeleting && displayText.length === 0) {
      timeout = pauseDuration / 2;
    } else {
      timeout = isDeleting ? deletingSpeed : typingSpeed;
    }

    const timer = setTimeout(() => {
      if (!isDeleting) {
        const next = current.slice(0, displayText.length + 1);
        setDisplayText(next);
        if (next === current) {
          setIsDeleting(true);
        }
      } else {
        const next = current.slice(0, displayText.length - 1);
        setDisplayText(next);
        if (next.length === 0) {
          setIsDeleting(false);
          setIndex((prev) => (prev + 1) % texts.length);
        }
      }
    }, timeout);

    return () => clearTimeout(timer);
  }, [texts, index, isDeleting, displayText, typingSpeed, deletingSpeed, pauseDuration]);

  return (
    <span className={cn("inline-flex items-center text-foreground", className)}>
      <span>{displayText}</span>
      {cursor ? (
        <motion.span
          className="ml-1 inline-block text-primary"
          animate={{ opacity: [0.2, 1, 0.2] }}
          transition={{ duration: 1.1, repeat: Infinity, ease: "easeInOut" }}
          aria-hidden="true"
        >
          {cursorChar}
        </motion.span>
      ) : null}
    </span>
  );
}

export { TypingDeleteText };
Typing Delete Text

Dependencies

Files

Installation
