Typewriter effect with React and Typed.js

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

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 few project based videos with vanilla HTML, CSS, and JavaScript.

You will learn about:

• Javascript intersection observer to add cool effects
• DOM manipulation
• Aligning elements with CSS positions.
• How to make responsive websites.
• How to create slide based webpage.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

You can also demo the application from here:

• Hulu
• SpaceX
• Tesla
• Fullpage landing page

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

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

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

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. See more of my work from here

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

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

• Email: thatanjan@gmail.com
• linkedin: @thatanjan
• portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Instagram (youtube channel): @thatanjan
• twitter: @thatanjan

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers

Videos might you might want to watch: