Create a text typing effect with React
The typing animation effect is a very popular effect on the web. It can be used to create a chat, a loading animation, or just to add a bit of dynamism to your website.
Since OpenAI has released ChatGPT (already almost a year!), we can see this effect more than ever. For a project, I had to create a similar effect, and I thought it would be a good idea to share it with you.
For this effect, we will use a custom hook:
We have 3 parameters: the text to display, the duration between each letter/word, and a boolean to know if we want to type by letter or by word (I use this in the next section).
In our example below we use the hook like with a
texts array, and we change the text every 5 seconds, like this:
This is very simple hook, we can improve it a bit in term of animation. For example, we can take inspiration from chat.openai, and add a fade out effect and a cursor.
I'm Julien, a senior front-end developer. I'm passionate about crafting digital projects. Let's connect on Twitter @ibelick
You can also join my newsletter! I will send you a mail sometime (not too often) with my latest articles and projects.