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 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. react-typical Prerequisites Prerequisites Before we begin, make sure you have basic knowledge of React and have Node installed in your system. React 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. Tailwind CSS 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: npx create-react-app my-app npx create-react-app my-app or if you're familiar with yarn. Using yarn yarn yarn create react-app my-app yarn create react-app my-app After your react app has been installed you cd into your project using cd my-app cd my-app Step 2: Install react-typical Using npm npm npm install react-typical --save npm install react-typical --save Using yarn yarn yarn add react-typical 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 npm install -D tailwindcss
npx tailwindcss init npm install -D tailwindcss
npx tailwindcss init Using yarn yarn yarn add tailwindcss --dev
npx tailwindcss init 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: [],
} /** @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; @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. index.js 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. src component In your component folder, create a file and call it TypingEffect.js . Import React and Typical library for creating typing animations. component TypingEffect.js React Typical import React from 'react';
import Typical from 'react-typical'; 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; 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. Typical steps loop wrapper <span> 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. App.js TypingEffect App import TypingEffect from './component/TypingEffect';

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

export default App; 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 npm start npm start Using yarn yarn yarn start 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! TypingEffect.js React Typical Tutorial 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 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 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 github repo Resources Resources Tailwind Doc Installation React Typical Tailwind Doc Installation Tailwind Doc Installation React Typical React Typical

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2024 Complete Full-Stack Developers Roadmap

10 Top Advantages of Node.js in eCommerce Industry

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 JavaScript Apps to Power your Business

10 Cool Data Table Libraries with Advanced Features

The Most Progressive Web Apps of 2022

2024 Complete Full-Stack Developers Roadmap

10 Top Advantages of Node.js in eCommerce Industry

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 JavaScript Apps to Power your Business

10 Cool Data Table Libraries with Advanced Features

The Most Progressive Web Apps of 2022

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps