Making Typing Animation with React Hooks

Ever wondered how to make words auto-type themselves onto a page? In this article, we shall go through a step-by-step tutorial on how to do so in your React app.

Some Prerequisites you need:

• Basic understanding of React
• Basic understanding of useState and useEffect React Hooks

Step 1: Import hooks

In our new React app project, let’s import the hooks we will need: useState and useEffect.

import React, { useState, useEffect } from "react"

Step 2: Initialize States

We are going to initialize 3 states:

• text: This is the current text that is displayed on the page.
• fullText: This is the final text we want to see after everything is typed out on the page.
• index: This is the current index of the text that is being displayed on the page.

So we will initialize the states with useState as follows:

const [text, setText] = useState("")
const [fullText, setFullText] = useState(
    "Your source of leading edge water and air treatment technology since 1994."
  )
const [index, setIndex] = useState(0)

Step 3: Text Animation