How to Add Typing Effects to Your React App with React Typical

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

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

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

Resources

• Tailwind Doc Installation
• React Typical