# 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 like this one below:

![demo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1601242071525/8Ozv9Qyq8.gif align="left")

> Note: It is smoother than it looks, the frame rate as I recorded the screen was bad.

**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`.

```javascript
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:

```javascript
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

To implement our text animation, we want our `text` to show characters of `fullText`one at a time. We will use `index` to track which character are we currently displaying from `fullText`.

We can create a `useEffect` function like so:

```javascript
useEffect(() => {
    if (index < fullText.length) {
      setTimeout(() => {
        setText(text + fullText[index])
        setIndex(index + 1)
      }, 40)
    }
  }, [index])
```

When the current index is less than `fullText` length, we will use `setTimeOut()` to continuously add the next character of `fullText` to our `text` then increase the `index` by one.

This way, text will be animated one character at a time.

## Step 4: Render text

Now we simply need to include `text` in the render function like:

```javascript
<h2>{text}</h2>
```

## And that's it!

And that's how the text will auto type itself onto the page. Thanks for reading. I hope it is helpful. Don't forget to like or share if it is and let me know if you have questions in the comments below. Till next time, cheers!