Purpose

The npm package simple-typewriter-effect provides an easy-to-use solution for adding a typewriter effect to text on a webpage. This package allows users to customize the appearance of the typewriter effect by easily adding their own CSS styles. With simple-typewriter-effect, users can create engaging and dynamic text displays that will captivate their audience.

React Example

I have created a react example to demonstrate the usage of this packge. User can create its own design and just provide text, id, and speed in miliseconds to typewriter function. Effect will be applied to the text but keep in mind that typewriter function is an async function so handle it accordinly.

import typewriter from "simple-typewriter-effect";

function App() {
  useEffect(() => {
    typewriter("this is a type writer demo", "typewriter", 500);
  },[]);

  return (
    <div className="App">
      <h1>Type writer Demo</h1>
      <div className="container">
        <p className="typewriter" id="typewriter"></p>
      </div>
    </div>
  );
}

Demo

This article contains the demostration and usage explanation for this package