Design Converter
Flutter
React
Shopify
Flutter
React
Shopify
Discord
Discord
Education
Software Development Executive - I
Last updated on Oct 17, 2023
Last updated on Oct 17, 2023
In this article, we will explore how to implement the typewriter effect in a React app. The typewriter effect is an animation effect that mimics the sequential appearance of text as if being typed on a typewriter.
The typewriter effect can be a creative way to display text in your React app. It can draw attention to important information, add a dynamic element to static pages, and enhance the overall user experience. This effect can be particularly effective in headers, promotional messages, or any text element where you want to create emphasis.
This blog post will guide you through the process of creating a Typewriter effect in React. We'll implement the effect using React hooks, specifically useState and useEffect, and control the typing speed and delay with the setTimeout function.
We'll also explore advanced concepts like the dependency array and custom React hooks. By the end of this tutorial, you'll have a working typewriter effect in your React app and a deeper understanding of React's capabilities.
The typewriter effect is a popular animation effect used in web design where text appears letter by letter as if being typed out on a typewriter. This effect can be achieved using various methods in JavaScript, but in this tutorial, we will be focusing on how to implement it in a React app.
The typewriter effect works by displaying one character of a string at a time, creating the illusion of typing. This is typically done by using a loop that iterates over each character in the string, adding one character to the displayed text at each interval.
The speed of the typing effect is controlled by the delay between each interval, which can be adjusted to create faster or slower typing speeds. In React, this can be achieved using the setTimeout function in combination with the useState and useEffect hooks.
The typewriter effect can add a dynamic and interactive element to a website, enhancing the overall user experience. It can be used to draw attention to important information, create a sense of anticipation, or simply add a fun and creative touch to a website's design.
Furthermore, implementing the typewriter effect in React can provide valuable practice in using React hooks and understanding the concept of state and side effects in functional components. It's a great example of how you can create complex effects and animations in React with just a few lines of code.
First, let's create a new component for our typewriter effect. We'll call this component Typewriter. In your project, create a new file called Typewriter.js. In this file, import React and the necessary hooks:
1import React, { useState, useEffect } from 'react';
Next, we'll create an array of words that we want our typewriter effect to cycle through. For the sake of this example, let's use the words "React", "Typewriter", and "Effect":
1const words = ['React', 'Typewriter', 'Effect'];
We'll use the useState hook to keep track of the current word, the current text being displayed, and the current index of the character being typed:
1const [wordIndex, setWordIndex] = useState(0); 2const [text, setText] = useState(''); 3const [isDeleting, setIsDeleting] = useState(false);
Now, let's use the useEffect hook to create the typing effect. We'll create a function called type that will be responsible for updating the text being displayed:
1function type() { 2 // Current word 3 const currentWord = words[wordIndex]; 4 // Determine the function to be performed 5 const shouldDelete = isDeleting ? 1 : -1; 6 // Create the new text 7 setText(current => currentWord.substring(0, current.length - shouldDelete)); 8 // Determine if this word is complete 9 if (!isDeleting && text === currentWord) { 10 // Make a pause at the end 11 setTimeout(() => setIsDeleting(true), 500); 12 } else if (isDeleting && text === '') { 13 setIsDeleting(false); 14 // Move to the next word 15 setWordIndex((current) => (current + 1) % words.length); 16 } 17}
We'll use the setTimeout function to control the speed of the typing effect. We'll call the type function at an interval determined by whether we're currently deleting or not:
1useEffect(() => { 2 const timer = setTimeout(type, isDeleting ? 100 : 200); 3 // Cleanup function to clear the timeout 4 return () => clearTimeout(timer); 5// Add dependencies to the dependency array 6}, [wordIndex, isDeleting, text]);
Finally, we'll render the current text in our component and export it as the default:
1return ( 2 <h1>{text}</h1> 3); 4 5export default Typewriter;
And there you have it! You've created a typewriter effect in React. You can now import this Typewriter component into your App component and see the effect in action.
In the useEffect hook, the dependency array is a crucial aspect. It determines when the effect function should be called based on changes to the dependencies. In our typewriter effect, the dependencies are wordIndex, isDeleting, and text. When any of these values change, the effect function is re-invoked, causing the typing animation to update.
Customizing the typewriter text is as simple as modifying the words array. You can add any strings you want to this array, and the typewriter effect will cycle through them. You could even make this array a prop of the Typewriter component, allowing you to pass in different arrays of words for different instances of the component.
To make the typewriter effect more reusable, you could create a custom React hook. This hook could take in an array of words and return the current text to be displayed. This would allow you to use the typewriter effect in any component with just one line of code.
1function useTypewriter(words) { 2 const [wordIndex, setWordIndex] = useState(0); 3 const [text, setText] = useState(''); 4 const [isDeleting, setIsDeleting] = useState(false); 5 6 // Rest of the code... 7 8 return text; 9}
The typing speed and delay between words can be controlled by adjusting the values passed to the setTimeout function. The first value is the delay when deleting, and the second value is the delay when typing. By adjusting these values, you can control the speed of the typing and deleting animation. You could even make these values props of the Typewriter component or parameters of the useTypewriter hook, allowing you to customize the speed and delay for different instances of the Typewriter effect.
In this tutorial, we've explored how to implement a typewriter effect in a React app. We've learned how to set up a new React app, import necessary dependencies, and create a Typewriter component. We've also delved into the logic behind the typewriter effect, including how to use the useState and useEffect hooks to control the typing animation and the setTimeout function to control the typing speed and delay.
Moreover, we've touched on some advanced concepts like understanding the dependency array in useEffect, customizing the typewriter text, creating a custom React hook for the typewriter effect, and controlling the typing speed and delay.
The typewriter effect is a creative way to display text in your React app. It can draw attention to important information, add a dynamic element to static pages, and enhance the overall user experience.
This tutorial is just the beginning. You can expand on what we've covered here by adding more features to the typewriter effect, like pausing on punctuation, typing sound effects, or a blinking cursor animation.
We hope this tutorial has been helpful and has given you a deeper understanding of how to create. effects and animations in React app.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
