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.
Join my newsletter to stay updated about the latest things I've created and discover the great finds I've come across on the internet.