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

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.