Typewriter Effect for web pages

Photo by Luca Onniboni on Unsplash

In this tutorial i will demonstrate usage for javascript package called simple-typewriter-effect which can be integrated with all JS frameworks but i will demonstrate an example with Reactjs.

Create React App

Run the following command to create a react app

npx create-next-app

Install simple-typewriter-effect

npm i simple-typewriter-effect

Update App.js

Replace the existing App.js code with following

import React, { useEffect } from "react";import "./App.css";
// import the typewriter package
import typewriter from "simple-typewriter-effect";

function App() {
  useEffect(() => {
    // this is an async function, so treat it accordingly
    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>
  );
}

export default App;

In above code we call the typewriter function when component is mounted. This function takes 3 arguments.

1. text
2. id of jsx element in which we want to perform typewriter effect
3. speed of typewriter effect in milliseconds

Al tough designing is in developers control, this package just takes care of typewriting but here is some basic styling to get you started.

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.typewriter{
  width: 400px;
  padding: 10px;
  border-radius: 5px;
  background-color: aqua;
  color: black;
}

Demo