({
textStream,
speed = 20,
mode = "typewriter",
onComplete,
fadeDuration,
segmentDelay,
characterChunkSize,
onError,
}: UseTextStreamOptions)
| 29 | }; |
| 30 | |
| 31 | function useTextStream({ |
| 32 | textStream, |
| 33 | speed = 20, |
| 34 | mode = "typewriter", |
| 35 | onComplete, |
| 36 | fadeDuration, |
| 37 | segmentDelay, |
| 38 | characterChunkSize, |
| 39 | onError, |
| 40 | }: UseTextStreamOptions): UseTextStreamResult { |
| 41 | const [displayedText, setDisplayedText] = useState(""); |
| 42 | const [isComplete, setIsComplete] = useState(false); |
| 43 | const [segments, setSegments] = useState<{ text: string; index: number }[]>( |
| 44 | [] |
| 45 | ); |
| 46 | |
| 47 | const speedRef = useRef(speed); |
| 48 | const modeRef = useRef(mode); |
| 49 | const currentIndexRef = useRef(0); |
| 50 | const animationRef = useRef<number | null>(null); |
| 51 | const fadeDurationRef = useRef(fadeDuration); |
| 52 | const segmentDelayRef = useRef(segmentDelay); |
| 53 | const characterChunkSizeRef = useRef(characterChunkSize); |
| 54 | const streamRef = useRef<AbortController | null>(null); |
| 55 | const completedRef = useRef(false); |
| 56 | const onCompleteRef = useRef(onComplete); |
| 57 | |
| 58 | useEffect(() => { |
| 59 | speedRef.current = speed; |
| 60 | modeRef.current = mode; |
| 61 | fadeDurationRef.current = fadeDuration; |
| 62 | segmentDelayRef.current = segmentDelay; |
| 63 | characterChunkSizeRef.current = characterChunkSize; |
| 64 | }, [speed, mode, fadeDuration, segmentDelay, characterChunkSize]); |
| 65 | |
| 66 | useEffect(() => { |
| 67 | onCompleteRef.current = onComplete; |
| 68 | }, [onComplete]); |
| 69 | |
| 70 | const getChunkSize = useCallback(() => { |
| 71 | if (typeof characterChunkSizeRef.current === "number") { |
| 72 | return Math.max(1, characterChunkSizeRef.current); |
| 73 | } |
| 74 | |
| 75 | const normalizedSpeed = Math.min(100, Math.max(1, speedRef.current)); |
| 76 | |
| 77 | if (modeRef.current === "typewriter") { |
| 78 | if (normalizedSpeed < 25) return 1; |
| 79 | return Math.max(1, Math.round((normalizedSpeed - 25) / 10)); |
| 80 | } else if (modeRef.current === "fade") { |
| 81 | return 1; |
| 82 | } |
| 83 | |
| 84 | return 1; |
| 85 | }, []); |
| 86 | |
| 87 | const getProcessingDelay = useCallback(() => { |
| 88 | if (typeof segmentDelayRef.current === "number") { |
no outgoing calls
no test coverage detected