Member-only story
How to Make a Typed-Text React Component
I recently built a “Typed Text” React component to use on my website. This component will take any text and animate it to look like it is being typed out.
Today, I want to walk through how I built this component as I think it is a great exercise to help build your React skills.
The Plan
There are many ways to approach this! Let me outline how I’d like to accomplish this with a custom React component…
This “TypedText” component will take in some text via the children prop. It will be responsible for simply animating the text, no fancy styling or anything like that. Then any text we want to appear “typed”, we can wrap in the <TypedText> component. We'll perform the animation by initially rendering an empty string, and then appending each character, one at a time, on a set interval. We'll do this until the full string has been rendered, and it appears to have been typed out onto the screen! Here's what the final results will look like:
We’ll also add a “delay” prop so you customize the time to delay between revealing characters.
Let’s build it!
Let’s start by creating a basic component:
