react-simple-typewriter

react-simple-typewriter is a library that allows you to easily implement a typewriter effect in your React-based applications. With this library, you can create a visually appealing effect where the text appears as if it is being typed by a typewriter, enhancing the overall user experience.

Features

  1. Simple Usage: react-simple-typewriter provides a straightforward and intuitive API, enabling users to implement typewriter effects with ease. In particular, by using the Typewriter component, you can achieve typing and erasing effects for desired text with just a few lines of code.

  2. Extensive Customization Options: This library offers various options for customization, including typing speed, erasing speed, delay time, and more. With these options, users can implement the typing effect in the most suitable way for their applications.

  3. Loop Functionality: react-simple-typewriter provides a loop feature that repeats the typing effect while cycling through a given list of words. This allows users to represent constantly changing text with a single configuration.


Installation

To implement the typewriter effect in your React applications, you need to install the react-simple-typewriter package using the command npm i react-simple-typewriter.

Installation

npm i react-simple-typewriter

Usage

The 'react-simple-typewriter' library is used to create simple and engaging typing animations in React applications. It can enhance the user experience and add a unique emphasis to the text by showcasing it in a distinctive way.

  • Name
    Typewriter import
    Type
    Usage
    Description

    You can import and use the Typewriter component. To type multiple words or sentences, pass an array of strings to the 'words' prop.

Cautions

  • Name
    Animation Duration
    Type
    Cautions
    Description

    By default, Typewriter types each word with an interval of 50ms. You can adjust this value using the 'typeSpeed' prop. Higher values will result in slower typing speed.

  • Name
    Pause Time
    Type
    Cautions
    Description

    After typing each word, you can set a pause time. This can be configured using the 'pauseFor' prop, measured in milliseconds.

Usage

import Typewriter from 'react-simple-typewriter'

function MyComponent() {
  return (
    <Typewriter
      words={['Hello', 'World', 'This', 'is', 'a', 'Typewriter']}
      loop={true}
      cursor
      cursorStyle='_'
      typeSpeed={70}
      deleteSpeed={50}
      delaySpeed={1000}
    />
  )
}

Customization

The 'react-simple-typewriter' library provides various options to customize the typing animation in detail. Each option is passed as a prop to the Typewriter component.

Description

  • Name
    words
    Type
    Customization
    Description

    An array of words or sentences to be typed. They will be typed in order, and once all words are typed, it will start from the beginning.

  • Name
    typeSpeed
    Type
    Customization
    Description

    Determines the speed of typing a word. Higher values result in slower typing speed. The default value is 50ms.

  • Name
    deleteSpeed
    Type
    Customization
    Description

    Determines the speed of deleting a typed word. Higher values result in slower deletion speed. The default value is 50ms.

  • Name
    delaySpeed
    Type
    Customization
    Description

    The delay time between typing one word and typing the next word. Measured in milliseconds.

  • Name
    loop
    Type
    Customization
    Description

    Determines whether to start typing from the beginning after typing all words. The default value is false.

  • Name
    cursor
    Type
    Customization
    Description

    Determines whether to show the typing cursor. The default value is true.

  • Name
    cursorStyle
    Type
    Customization
    Description

    Sets the style of the typing cursor. The default value is '|'.

  • Name
    cursorBlinking
    Type
    Customization
    Description

    Determines whether the typing cursor has a blinking effect. The default value is true.

  • Name
    onLoopDone
    Type
    Customization
    Description

    Sets a callback function to be called after typing all words and before starting the next loop, if loop is set to true.

  • Name
    onType
    Type
    Customization
    Description

    Sets a callback function to be called during the typing of each word.

  • Name
    onDelay
    Type
    Customization
    Description

    Sets a callback function to be called during the delay time between words.

  • Name
    onDelete
    Type
    Customization
    Description

    Sets a callback function to be called during the deletion of each word.

Customization

import Typewriter from 'react-simple-typewriter'

function MyComponent() {
  return (
    <Typewriter
      words={['Hello', 'World', 'This', 'is', 'a', 'Typewriter']}
      typeSpeed={70}
      deleteSpeed={50}
      delaySpeed={1000}
      loop={true}
      cursor={true}
      cursorStyle='\_'
      cursorBlinking={true}
      onLoopDone={() => console.log('Loop Finished')}
      onType={(word) => console.log(`Typing: ${word}`)}
      onDelay={() => console.log('Delay')}
      onDelete={(word) => console.log(`Deleting: ${word}`)}
    />
  )
}

Example

In this example, we created a component that automatically types various phrases using the 'react-simple-typewriter' library. The phrases "Let's Play Together," "Let's Make Together," and "Welcome to KAKAO.GG" are typed in sequence, and after all phrases are typed, it starts from the beginning again.

Additional Explanation

  • Name
    Typewriter
    Type
    Example
    Description

    The Typewriter component takes an array of phrases to be typed and allows you to configure typing speed, deletion speed, delay time between phrases, and whether to loop.

  • Name
    Cursor
    Type
    Example
    Description

    The Cursor component is used to set the color of the typing cursor. In this example, we set the cursor color to '#F7AB0A'.

/developer.jsx

import React from 'react'
import { Cursor, Typewriter } from 'react-simple-typewriter'

function AutoWriter() {
  return (
    <div>
      <h1>
        <span className="text-5xl font-semibold lg:text-6xl">
          <Typewriter
            words={[
            "Let's Play Together",
            "Let's Make Together",
            'Welcome to KAKAO.GG',
            ]}
            loop={true}
            cursorStyle="\_"
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            />
        </span>
        <Cursor cursorColor="#F7AB0A" />
      </h1>
    </div>
  )
}
export default AutoWriter