33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function useTypewriter(words: string[], typingSpeed = 80, deletingSpeed = 40, pauseMs = 2000) {
|
|
const [displayed, setDisplayed] = useState("");
|
|
const [wordIndex, setWordIndex] = useState(0);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const current = words[wordIndex % words.length];
|
|
|
|
const timeout = setTimeout(() => {
|
|
if (!isDeleting) {
|
|
setDisplayed(current.slice(0, displayed.length + 1));
|
|
if (displayed.length + 1 === current.length) {
|
|
setTimeout(() => setIsDeleting(true), pauseMs);
|
|
}
|
|
} else {
|
|
setDisplayed(current.slice(0, displayed.length - 1));
|
|
if (displayed.length - 1 === 0) {
|
|
setIsDeleting(false);
|
|
setWordIndex((i) => i + 1);
|
|
}
|
|
}
|
|
}, isDeleting ? deletingSpeed : typingSpeed);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, [displayed, isDeleting, wordIndex, words, typingSpeed, deletingSpeed, pauseMs]);
|
|
|
|
return displayed;
|
|
}
|