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
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

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

Demo

You can demo the website from here

Features

  • Static Blog pages will make the website load faster.
  • Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
  • Autocomplete search feature for the blog posts.
  • Real-time view counter and so on.

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. I am available on Upwork

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?