54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react'
|
|
import { useReducedMotion } from './useReducedMotion'
|
|
|
|
interface UseTypingEffectOptions {
|
|
text: string
|
|
speed?: number
|
|
delay?: number
|
|
onComplete?: () => void
|
|
}
|
|
|
|
export function useTypingEffect({ text, speed = 50, delay = 0, onComplete }: UseTypingEffectOptions) {
|
|
const [displayed, setDisplayed] = useState('')
|
|
const [started, setStarted] = useState(false)
|
|
const [done, setDone] = useState(false)
|
|
const reducedMotion = useReducedMotion()
|
|
const indexRef = useRef(0)
|
|
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
const start = useCallback(() => {
|
|
if (started) return
|
|
setStarted(true)
|
|
}, [started])
|
|
|
|
useEffect(() => {
|
|
if (!started) return
|
|
|
|
if (reducedMotion) {
|
|
setDisplayed(text)
|
|
setDone(true)
|
|
onComplete?.()
|
|
return
|
|
}
|
|
|
|
const type = () => {
|
|
if (indexRef.current < text.length) {
|
|
setDisplayed(text.slice(0, indexRef.current + 1))
|
|
indexRef.current++
|
|
timeoutRef.current = setTimeout(type, speed)
|
|
} else {
|
|
setDone(true)
|
|
onComplete?.()
|
|
}
|
|
}
|
|
|
|
timeoutRef.current = setTimeout(type, delay)
|
|
|
|
return () => {
|
|
if (timeoutRef.current) clearTimeout(timeoutRef.current)
|
|
}
|
|
}, [started, text, speed, delay, reducedMotion, onComplete])
|
|
|
|
return { displayed, done, start }
|
|
}
|