Typewriter effect is an animation effect where a text appears like someone is typing.

Typewriter effect with React and Typed.js

Typewriter effect is an animation effect where a text appears like someone is typing.

In this blog, you are going to create a typewriter effect with React and Typed.js.

Demo:

Starter code.

  • Create a React project(I am using NextJS) and install typed.js
yarn add typed.js
  • index.js file:
import React from 'react'
import Image from 'next/image'
import TypeWriter from '../components/TypeWriter'
import { container, overlay } from '../../styles/type.module.css'
const Type = () => {
return (
<div className={container}>
<TypeWriter />
<Image src='/tw_2.jpg' layout='fill' objectFit='cover' alt='Taylor swift' />
</div>
)
}
export default Type
  • TypeWriter.jsx file:
import React from 'react'
import { typeContainer } from '../../styles/type.module.css'
const Type = () => {
return (
<div className={typeContainer}>
<h1 style={{ display: 'inline' }} />
</div>
)
}
  • type.module.css file for styles
.container {
height: 100vh;
position: relative;
}
.typeContainer {
position: absolute;
background: #02020294;
width: 100vw;
z-index: 20;
color: white;
padding: 50px 0;
bottom: 15%;
padding-left: 2rem;
}
  • Result Result without typewriter effect

We don't have anything special. We have just a container with the position of relative. The container is taking full width and height of the screen.

A nextjs Image component is used to display the image as if it is a background image. Behind the scenes, the image is positioned absolute and it is taking the whole width and height of its container to make it look like a background image.

On the Typewriter component, we have a container with className of .typeContainer. It is also positioned as absolute. Inside we have an h1 tag. This will be used to create a typewriter effect.

Let's do the actual task.

  • import typed.js
import Typed from 'typed.js'
  • We need to create two refs with the useRef hook. With ref, we can reference the dom element.
// TypeWriter.jsx
const Type = () => {
// Create reference to store the DOM element containing the animation
const el = React.useRef(null)
// Create reference to store the Typed instance itself
const typed = React.useRef(null)
return (
<div className={typeContainer}>
<h1 ref={el} style={{ display: 'inline' }} />
</div>
)
}

We have attached the el ref to the h1 using the ref prop.

  • We need to use the useEffect hook which will always run after the component gets mounted
const Type = () => {
// Create reference to store the DOM element containing the animation
const el = React.useRef(null)
// Create reference to store the Typed instance itself
const typed = React.useRef(null)
React.useEffect(() => {
const options = {
// strings that will be rendered for typewriter effect
strings: [
'Hello, My name is Taylor Swift.',
"My new album Red (Taylor's Version) is coming on November 12, 2021.",
'PRE-ORDER NOW',
],
typeSpeed: 50, // typeing speed will be 50ms
backSpeed: 10, // typing backSpeed will be 10ms
loop: true,
}
// elRef refers to the <h1 /> rendered below
typed.current = new Typed(el.current, options)
return () => {
// Make sure to destroy Typed instance during cleanup
// to prevent memory leaks
typed.current.destroy()
}
}, [])
return (
<div className={typeContainer}>
<h1 ref={el} style={{ display: 'inline' }} />
</div>
)
}

We have created a new instance of the Typed class passing the h1 dom reference and options.

To see more available options visit the docs

Our Final Result:

That's it for this blog.

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js. If you are interested you can check the video.

You can also demo the application form here

Screenshot of Insta Carousel

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, feel free to contact me on any social media as @thatanjan. Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.

Screenshot

Homepage

More screenshots

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Next PostWhat is Code Splitting?