React Typewriter
React Awesome Typewriter is a simple component that allows maximum customization on the "typewriter" effect to an array of text that you might need. You can use your own custom classes to provide the type of styling to your text. Try the Demo
Installation
For npm
npm i react-ts-typewriterFor yarn
yarn add react-ts-typewriterExample usage
/* Custom Classes for demo purposes only */
.text-secondary {
color: #535bf2;
}
.text-primary {
color: #f2a154;
}
.text-big {
font-size: 3rem;
}
.text-small {
font-size: 1.5rem;
}import ReactAwesomeTypewriter from "react-awesome-typewriter";
const OPTIONS = [
[
{ text: "Primary Text ", classNames: "text-primary text-big" },
{ text: "Secondary Text ", classNames: "text-secondary text-big" },
{ text: "Normal Text ", classNames: "text-big" },
],
[
{ text: "Big Text ", classNames: "text-big" },
{ text: "Small Text", classNames: "text-small" },
],
];
export default function Main() {
return (
<h1>
<ReactAwesomeTypewriter options={OPTIONS} />
</h1>
);
}Props
| Prop name | Type | Description | Required | Default |
| options | {text: string, className:string}[] | Text to display as the typewriter effect | true | |
| forwardSpeed | number | Speed of forward typing (in ms) | false | 60 |
| backwardSpeed | number | Speed for backspacing (in ms) | false | 25 |
| waitTime | number | Wait time after text is complete (in ms) | false | 4000 |
| cursorColor | string | Color of the blinking cursor | false | #FFF |
| cursorHeight | string | Height of the blinking cursor | false | 2.25rem |
| cursorWidth | string | Width of the blinking cursor | false | 3px |
| cursorGap | string | Gap from the last character to cursor | false | 10px |
| cursorAnimationDuration | number | Duration of cursor blink animation (in ms) | false | 700 |
| typeWriterId | string | Unique Identifider for typewriter | false | random string |
FAQ
1. Changing property of one react-awesome-typewriter changes properties for all
You can simply make use of multiple typeWriterId for multiple instances of react-awesome-typewriter component to effectively solve this.