"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface TypewriterTextProps extends React.HTMLAttributes<HTMLSpanElement> {
  /**
   * The text to type out
   */
  text: string
  /**
   * Typing speed in milliseconds per character
   * @default 50
   */
  speed?: number
  /**
   * Delay before starting to type (in milliseconds)
   * @default 0
   */
  delay?: number
  /**
   * Show blinking cursor
   * @default true
   */
  cursor?: boolean
  /**
   * Cursor character
   * @default "|"
   */
  cursorChar?: string
  /**
   * Callback when typing completes
   */
  onComplete?: () => void
  /**
   * Render as different element
   * @default "span"
   */
  as?: "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div"
}

function TypewriterText({
  text,
  speed = 50,
  delay = 0,
  cursor = true,
  cursorChar = "|",
  onComplete,
  className,
  as: Component = "span",
  ...props
}: TypewriterTextProps) {
  const [displayedText, setDisplayedText] = React.useState("")
  const [isComplete, setIsComplete] = React.useState(false)
  const [hasStarted, setHasStarted] = React.useState(false)

  React.useEffect(() => {
    // Reset state when text changes
    setDisplayedText("")
    setIsComplete(false)
    setHasStarted(false)

    // Delay before starting
    const delayTimeout = setTimeout(() => {
      setHasStarted(true)
    }, delay)

    return () => clearTimeout(delayTimeout)
  }, [text, delay])

  React.useEffect(() => {
    if (!hasStarted) return

    if (displayedText.length < text.length) {
      const timeout = setTimeout(() => {
        setDisplayedText(text.slice(0, displayedText.length + 1))
      }, speed)

      return () => clearTimeout(timeout)
    } else if (!isComplete) {
      setIsComplete(true)
      onComplete?.()
    }
  }, [displayedText, text, speed, hasStarted, isComplete, onComplete])

  return (
    <Component className={cn("inline", className)} {...props}>
      {displayedText}
      {cursor && (
        <span
          className={cn(
            "ml-0.5 inline-block",
            !isComplete && "animate-pulse"
          )}
          aria-hidden="true"
        >
          {cursorChar}
        </span>
      )}
    </Component>
  )
}

export { TypewriterText }
Typewriter Text

Dependencies

Files

Installation
