An utility hook to create typewriter animation effect in React.
Requires React >= 16
yarn add use-typewriter-animationconst { ref, typewriter } = useTypewriter(options);typewriter
.type('Hello my name is use-typewriter-animation!')
.pauseFor(100)
.deleteLetters(1)
.colorize('red')
.type('Dogu!')
.start();<div ref={ref} />| property | type | * | default |
|---|---|---|---|
loop |
boolean | optional | false |
typeSpeed (ms) |
number | optional | 30 |
deleteSpeed (ms) |
number | optional | 30 |
color |
string | optional | #000 |
| Function | Purpose |
|---|---|
type("Example") |
Types the given (Example) text. |
deleteLetters(5) |
Deletes the (5) letters from the end of text. |
deleteWords(2) |
Deletes the (2) words from the end of text. |
deleteAll() |
Deletes all the text. |
pauseFor(300) |
Pauses (300ms) the typing for the specified time. |
colorize("red") |
Changes the color (red) of the text. |
start() |
Triggers the sequence & starts the typing. |
type TypewriterBaseType = {
type: (text: string) => TypewriterBaseType;
deleteLetters: (letterCount: number) => TypewriterBaseType;
deleteWords: (wordCount: number) => TypewriterBaseType;
deleteAll: () => TypewriterBaseType;
pauseFor: (duration: number) => TypewriterBaseType;
colorize: (color: string) => TypewriterBaseType;
start: () => Promise<void>;
};import { useEffect } from 'react';
import { useTypewriter } from './useTypewriter';
const Typewriter = () => {
const { ref, typewriter } = useTypewriter();
useEffect(() => {
typewriter
.type('Hello, this is use-typewriter-animation hook!')
.pauseFor(300)
.deleteAll()
.type('cyan magenta \n\ndarkgray')
.pauseFor(200)
.deleteLetters(5)
.colorize('red')
.type('yellow black white turquoise green')
.deleteWords(2)
.start();
}, []);
return <div ref={ref} />;
};
export default Typewriter;License: MIT