Menu
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
1yarn add typed.js
  • index.js file:
1import React from 'react'
2import Image from 'next/image'
3

4import TypeWriter from '../components/TypeWriter'
5import { container, overlay } from '../../styles/type.module.css'
6

7const Type = () => {
8    return (
9        <div className={container}>
10            <TypeWriter />
11            <Image src='/tw_2.jpg' layout='fill' objectFit='cover' alt='Taylor swift' />
12        </div>
13    )
14}
15

16export default Type
  • TypeWriter.jsx file:
1import React from 'react'
2

3import { typeContainer } from '../../styles/type.module.css'
4

5const Type = () => {
6    return (
7        <div className={typeContainer}>
8            <h1 style={{ display: 'inline' }} />
9        </div>
10    )
11}
  • type.module.css file for styles
1.container {
2    height: 100vh;
3    position: relative;
4}
5

6.typeContainer {
7    position: absolute;
8    background: #02020294;
9    width: 100vw;
10    z-index: 20;
11    color: white;
12    padding: 50px 0;
13    bottom: 15%;
14    padding-left: 2rem;
15}
  • Result

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
1import Typed from 'typed.js'
  • We need to create two refs with the useRef hook. With ref, we can reference the dom element.
1// TypeWriter.jsx
2const Type = () => {
3    // Create reference to store the DOM element containing the animation
4    const el = React.useRef(null)
5    // Create reference to store the Typed instance itself
6    const typed = React.useRef(null)
7

8    return (
9        <div className={typeContainer}>
10            <h1 ref={el} style={{ display: 'inline' }} />
11        </div>
12    )
13}

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
1const Type = () => {
2    // Create reference to store the DOM element containing the animation
3    const el = React.useRef(null)
4    // Create reference to store the Typed instance itself
5    const typed = React.useRef(null)
6

7    React.useEffect(() => {
8        const options = {
9            // strings that will be rendered for typewriter effect
10            strings: [
11                'Hello, My name is Taylor Swift.',
12                "My new album Red (Taylor's Version) is coming on November 12, 2021.",
13                'PRE-ORDER NOW',
14            ],
15            typeSpeed: 50, // typeing speed will be 50ms
16            backSpeed: 10, // typing backSpeed will be 10ms
17            loop: true,
18        }
19

20        // elRef refers to the <h1 /> rendered below
21        typed.current = new Typed(el.current, options)
22

23        return () => {
24            // Make sure to destroy Typed instance during cleanup
25            // to prevent memory leaks
26            typed.current.destroy()
27        }
28    }, [])
29

30    return (
31        <div className={typeContainer}>
32            <h1 ref={el} style={{ display: 'inline' }} />
33        </div>
34    )
35}

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 an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostBuild a carousel postcard like Instagram with Reactjs, Material-UI, and Swiperjs
Next PostWhat is Code Splitting?