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-typewriter

For yarn

yarn add react-ts-typewriter

Example 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.