diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx index ac38f80..230de0e 100644 --- a/src/components/Typewriter.tsx +++ b/src/components/Typewriter.tsx @@ -16,6 +16,7 @@ export const Typewriter = ({ typeSpeed = 80, deleteSpeed = 50, delaySpeed = 1500, + delayStart = 100, cursor = false, cursorStyle = '|', cursorColor = 'inherit', @@ -30,6 +31,7 @@ export const Typewriter = ({ loop, typeSpeed, deleteSpeed, + delayStart, delaySpeed, onLoopDone, onType, diff --git a/src/hooks/useTypewriter.tsx b/src/hooks/useTypewriter.tsx index bb1ebd5..f60f53a 100644 --- a/src/hooks/useTypewriter.tsx +++ b/src/hooks/useTypewriter.tsx @@ -20,6 +20,8 @@ export type TypewriterProps = { deleteSpeed?: number /** Delay time between the words in Milliseconds */ delaySpeed?: number + /** Delay time before start in Milliseconds */ + delayStart?: number } export type TypewriterHelper = { @@ -39,6 +41,7 @@ export const useTypewriter = ({ typeSpeed = 80, deleteSpeed = 50, delaySpeed = 1500, + delayStart = 0, onLoopDone, onType, onDelete, @@ -56,38 +59,51 @@ export const useTypewriter = ({ const isDelete = useRef(false) const isType = useRef(false) const isDelay = useRef(false) + const isFirst = useRef(true) + const isFirstDone = useRef(false) const handleTyping = useCallback(() => { const index = count % words.length const fullWord = words[index] - - if (!isDelete.current) { - dispatch({ type: 'TYPE', payload: fullWord, speed: typeSpeed }) - isType.current = true - - if (text === fullWord) { - dispatch({ type: 'DELAY', payload: delaySpeed }) - isType.current = false - isDelay.current = true - - setTimeout(() => { - isDelay.current = false - isDelete.current = true - }, delaySpeed) - - if (loop > 0) { - loops.current += 1 - if (loops.current / words.length === loop) { + if (!isFirst.current) { + if (!isDelete.current) { + dispatch({ type: 'TYPE', payload: fullWord, speed: typeSpeed }) + isType.current = true + + if (text === fullWord) { + dispatch({ type: 'DELAY', payload: delaySpeed }) + isType.current = false + isDelay.current = true + + setTimeout(() => { isDelay.current = false - isDone.current = true + isDelete.current = true + }, delaySpeed) + + if (loop > 0) { + loops.current += 1 + if (loops.current / words.length === loop) { + isDelay.current = false + isDone.current = true + } } } + } else { + dispatch({ type: 'DELETE', payload: fullWord, speed: deleteSpeed }) + if (text === '') { + isDelete.current = false + dispatch({ type: 'COUNT' }) + } } } else { - dispatch({ type: 'DELETE', payload: fullWord, speed: deleteSpeed }) - if (text === '') { - isDelete.current = false - dispatch({ type: 'COUNT' }) + if (!isFirstDone.current) { + dispatch({ type: 'DELAY', payload: delayStart }) + isDelay.current = true + setTimeout(() => { + isDelay.current = false + isFirst.current = false + }, delayStart) + isFirstDone.current = true } } @@ -108,6 +124,7 @@ export const useTypewriter = ({ deleteSpeed, loop, typeSpeed, + delayStart, words, text, onType, @@ -119,7 +136,6 @@ export const useTypewriter = ({ const typing = setTimeout(handleTyping, speed) if (isDone.current) clearTimeout(typing) - return () => clearTimeout(typing) }, [handleTyping, speed])