DocsDeveloper

Typed

Overview

The "Typed" Component is a React component that utilizes the Typed.js library to create a typing effect for a list of strings. This component accepts various props to customize its behavior, including the strings to display, start delay, typing speed, backspacing speed, backspacing delay, and whether the typing should loop. The component dynamically renders a <span> element with the provided class name, allowing for easy integration into different parts of a React application. It encapsulates the functionality of creating and destroying the Typed.js instance within a useEffect hook, ensuring proper cleanup and preventing memory leaks. Overall, the "Typed" Component offers a convenient way to add engaging typing animations to React projects with minimal configuration.


Helpful Tip: You can style the cursor by targeting the typed-cursor class with CSS

Demo

Hello!

I'm Jrui and I'm a


This is Jrui the mascot!

Easy CLI Install

jrui add typed

Props

The `TypedComponent` accepts the following props for configuring its typing animation:

  • strings?: string[]
    An array of strings to be displayed and typed out sequentially.
  • startDelay?: number (default: 1000)
    The delay before the typing animation starts, measured in milliseconds.
  • typeSpeed?: number (default: 100)
    The speed at which characters are typed, measured in milliseconds per character.
  • backSpeed?: number (default: 50)
    The speed at which characters are deleted (backspacing), measured in milliseconds per character.
  • backDelay?: number (default: 500)
    The delay before starting to backspace, measured in milliseconds.
  • loop?: boolean (default: true)
    Determines whether the typing animation should loop or not.
  • className?: string
    Custom CSS class to be applied to the <span> element containing the typing animation.

Props Demo

Component File

components > Typed.tsx

"use client";
import Typed from "typed.js";
import { useEffect, useRef } from "react";

interface Props {
strings?: string[];
startDelay?: number;
typeSpeed?: number;
backSpeed?: number;
backDelay?: number;
loop?: boolean;
className?: string;
}

export default function TypedComponent({
strings = [
    "Full-Stack Developer",
    "Keyboard Warrior",
    "Software Engineer",
    "Coding Enthusiast",
    "Problem Solver",
],
startDelay = 1000,
typeSpeed = 100,
backSpeed = 50,
backDelay = 500,
loop = true,
className,
}: Props) {
// Create Ref element.
const el = useRef(null);

useEffect(() => {
    const typed = new Typed(el.current, {
    // Strings to display
    strings,
    // Speed settings, try diffrent values untill you get good results
    startDelay: startDelay,
    typeSpeed: typeSpeed,
    backSpeed: backSpeed,
    backDelay: backDelay,
    loop: loop,
    });

    // Destroying
    return () => {
    typed.destroy();
    };
}, []);

return <span className={className} ref={el}></span>;
}

Example Use Case

Example.tsx

import React from "react";
import Typed from "./Typed"; // Adjust the import path based on your project structure

const Example: React.FC = () => {
  return (
    <Typed
          strings={[
            "The 'TypedComponent' is a React component that creates a typing effect using the Typed.js library, customizable with props for strings, delay, and speed. It simplifies the integration of dynamic typing animations into React applications, offering easy configuration and efficient cleanup within a useEffect hook.",
          ]}
          startDelay={0}
          typeSpeed={10}
          loop={false}
          className="text-primary text-2xl font-semibold"
        />
  );
};

export default Example;
Prev: Next: