How to Add Typing Effects to Your React App with React Typical
Tags: webdev, javascript, beginners, react
Published: 2024-07-02 17:40:09

**Introduction**
Have you always wondered how to create a typing effect on your website? I too was wondering. I have learned to implement a dynamic typewriting effect in React using the `react-typical` library. This effect can switch up your website design, especially in your hero section which plays a vital role in engaging your visitors.

**Prerequisites**
Before we begin, make sure you have basic knowledge of React and have Node installed in your system.  You'll also need a React project set-up. If you don't have one yet, you can create it using Create React App. I will also be making use of [Tailwind CSS](https://tailwindcss.com/docs/installation) for styling.



## Step 1: Set Up Your React Project
If you don’t already have a React project, you can set one up quickly using Create React App:

Using **npx**
```
npx create-react-app my-app
```
or if you're familiar with yarn.
 
Using **yarn**
```
yarn create react-app my-app 
```

After your react app has been installed you cd into your project using

```
cd my-app
```



## Step 2: Install react-typical
Using **npm**
```
npm install react-typical --save

```
Using **yarn**

```
yarn add react-typical

```



## Step 3: Install Tailwind CSS
Install tailwindcss via npm or yarn, and create your tailwind.config.js file.

Using **npm**
```
npm install -D tailwindcss
npx tailwindcss init
```

Using **yarn**

```
yarn add tailwindcss --dev
npx tailwindcss init
```



## Step 4: Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
This step configures Tailwind to scan your specified files (like HTML, JavaScript, or React files) for class names. By doing this, Tailwind can generate the necessary styles based on the classes used in those files, which helps in optimizing the CSS output, reducing file size, and ensuring that only the styles you actually use are included in the final build.



## Step 5: Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

This step integrates Tailwind CSS into your project. It connects Tailwind’s base, component, and utility styles to your CSS file, which is then linked to your `index.js`. This setup allows you to use Tailwind CSS classes flexibly throughout your code.



## Step 6: Develop a React Component for Typing Animation
In your `src` folder create a `component` folder which would be used in storing your components.

In your `component` folder, create a file and call it `TypingEffect.js`. Import `React` and `Typical` library for creating typing animations.

```
import React from 'react';
import Typical from 'react-typical';
```
Then, add the following code to define the TypingEffect component:

```
import React from 'react';
import Typical from 'react-typical';

const TypingEffect = () => {
  return (
    <h1 className="text-3xl lg:text-6xl">
      <Typical
        steps={[
          'Unlock the Future of Digital Artistry', 2000,
          'Unlock the Future of Digital Collectibles', 2000,
          'Unlock the Future of Digital Assets', 2000,
        ]}
        loop={1}
        wrapper="span"
      />
    </h1>
  );
};

export default TypingEffect;
```
The `Typical` component is used to create a typing animation. The `steps` prop defines the text to be typed and the duration (2000 milliseconds) each text stays before changing. The `loop` prop is set to 1, meaning the animation will play once. The `wrapper` prop wraps the animated text in a `<span>` element.



## Step 7: Import and Use the TypingEffect Component
Open the `App.js` file in the src directory and import the `TypingEffect` component. Then, use it within the `App` component to display the typing effect header.

```
import TypingEffect from './component/TypingEffect';

function App() {
  return (
    <div >
      <TypingEffect/>
    </div>
  );
}

export default App;

```



## Step 8: Run Your Application
Finally, start your React application to see the typing effect in action:

Using **npm**
```
npm start

```
Using **yarn**

```
yarn start

```

This is how it looks on my browser.

![Browser Illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq7g4gd7q57k3c4ch46z.gif)



## Step 9: Customize the Styles
To elevate my code further, I incorporated custom animations into `TypingEffect.js`. I've documented the entire process in a detailed, step-by-step tutorial on my YouTube channel. You can watch it here: [React Typical Tutorial](https://youtu.be/B6I4E4CwH3g). Check it out for a comprehensive guide!

```
import React from 'react'
import Typical from 'react-typical'
import HeroImg from '../assets/img.jpeg'

const TypingEffect = () => {
    return (
        <div className='bg-gray-900 h-screen flex justify-between items-center p-16'>
            <h1 className='text-6xl text-white w-1/2'>
                <Typical
                    steps={[
                        'Unlock the Future of Digital Artistry', 2000,
                        'Unlock the Future of Digital Collectibles', 2000,
                        'Unlock the Future of Digital Assets', 2000,
                    ]}
                    loop={1}
                    wrapper='span'
                />
            </h1>
            <img src={HeroImg} className='w-1/3 rounded-lg' />


        </div>
    )
}

export default TypingEffect
```


![This is how it looks on my browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdlghe70ai2r7joqdkhs.gif)



**Conclusion**
The React Typing effect can boost visibility and engagement on your website by dynamically displaying key messages. It adds an interactive element that captures user attention, making your content more memorable and appealing. Implementing this feature can enhance user experience, highlight important information, and create a modern, professional look for your site. By following the steps outlined, you can easily integrate a typing effect into your React projects, ensuring your web presence stands out. To access my repository, simply follow this link [github repo](https://github.com/Uhiene/React-typing-effect)



**Resources**
[Tailwind Doc Installation](https://tailwindcss.com/docs/installation)
[React Typical](https://www.npmjs.com/package/react-typical)