Create a Captivating Typewriter Effect with React

The typewriter effect is a visually appealing feature that can enhance the user experience of your website or application. In this article, we will explore how to create a typewriter effect from scratch using React. We will also discuss an alternative approach using a pre-existing typewriter package.

Prerequisites

To follow along with this tutorial, you need basic knowledge of React. We will cover the following topics:

• Installing dependencies
• Building a typewriter effect
• Adding a blinking cursor
• Deleting and retyping text
• Highlighting code syntax
• Using a typewriting library

Installing Dependencies

If you don’t have React installed already, navigate to your project directory and run the following command in your terminal:
bash
npx create-react-app typewriter

This command creates a new React project folder called typewriter with all the necessary dependencies.

Building a Typewriter Effect

Our typewriter effect will consist of two main parts: a container where we’ll keep the text that we want to animate, and a blinking cursor to mimic a typewriter.

Typewriter Display Area

In our App.js file, we’ll build the display window for the typewriter effect:
“`jsx
import React from ‘react’;

function App() {
return (

);
}

export default App;
“`
This code creates a container where we’ll keep the text that we want to animate with our typewriter effect.

Adding a Blinking Cursor

Next, we’ll add a blinking cursor to the end of the text. Add the following CSS styles to your index.css file:
“`css
.typewriter::after {
content: ‘|’;
animation: blink 0.5s infinite;
}

@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
“`
These styles add a blinking cursor to the end of the text.

Deleting and Retyping Text

To create a typing effect, we’ll use the React.useEffect hook. Add the following code to your App.js file:
“`jsx
import React, { useState, useEffect } from ‘react’;

function App() {
const [text, setText] = useState(”);
const [isDeleting, setIsDeleting] = useState(false);

useEffect(() => {
const timeoutId = setTimeout(() => {
if (isDeleting) {
setText(text.slice(0, -1));
} else {
setText(text + ‘Hello, World!’);
}
setIsDeleting(!isDeleting);
}, 500);
return () => clearTimeout(timeoutId);
}, [text, isDeleting]);

return (

);
}
“`
This code creates a typing effect by adding and removing characters from the text.

Highlighting Code Syntax

To highlight our text as code, we’ll use the react-syntax-highlighter package. Install it by running the following command in your terminal:
bash
npm install react-syntax-highlighter

Then, import it in your App.js file and use it to highlight your text:
“`jsx
import React from ‘react’;
import SyntaxHighlighter from ‘react-syntax-highlighter’;

function App() {
return (

{‘const helloWorld = “Hello, World!”;’}

);
}
“`
This code highlights the text as JavaScript code.

Using a Typewriting Library

If you don’t want to create a typewriter effect from scratch, you can use a pre-existing library like react-typewriter-effect. Install it by running the following command in your terminal:
bash
npm install react-typewriter-effect

Then, import it in your App.js file and use it to create a typewriter effect:
“`jsx
import React from ‘react’;
import Typewriter from ‘react-typewriter-effect’;

function App() {
return (

);
}
“
This code creates a typewriter effect using thereact-typewriter-effect` library.

By following these steps, you can create a captivating typewriter effect with React. You can customize the effect to fit your needs and use it to enhance the user experience of your website or application.