Skip to content

Simulates typing effect, eraser effect and a blinking cursor.

License

Notifications You must be signed in to change notification settings

lamyfarai/react-typing-effect

Repository files navigation

React Typing Effect

This is a UI component built completely in React that simulates typing effect, eraser effect and a blinking cursor.

Demo

Screenshot 1

Getting Started

$ npm install --save react-typing-effect

ReactTypingEffect is the main component.

Example Usage:

import React from 'react';
import ReactTypingEffect from 'react-typing-effect';

const ReactTypingEffectDemo = () => {
  return (
    <>
      <ReactTypingEffect
        text={["Hello.", "World!"]}
      />

      <br />

      <ReactTypingEffect
        text={["Hello.", "World!!!"]}
        cursorRenderer={cursor => <h1>{cursor}</h1>}
        displayTextRenderer={(text, i) => {
          return (
            <h1>
              {text.split('').map((char, i) => {
                const key = `${i}`;
                return (
                  <span
                    key={key}
                    style={i%2 === 0 ? { color: 'magenta'} : {}}
                  >{char}</span>
                );
              })}
            </h1>
          );
        }}        
      />
    </>
  );
};

Motivation

Inspired by this blog post http://burnmind.com/tutorials/how-to-create-a-typing-effect-an-eraser-effect-and-a-blinking-cursor-using-jquery

API

Required Props

  • text: That text that will be typed and erased. Can be either an array of strings or just a string.

Other Props

  • displayTextRenderer: func. (displayText: string, textIndex: number) => element If text propType is array, then textIndex will be the array index of the text, otherwise textIndex will be equal to 0.
  • staticText: String. Text that will just be static and cannot be typed or erased.
  • className: String
  • speed: Number. default 500ms. Typing speed.
  • eraseSpeed: Number. default 500ms. Erase speed.
  • eraseDelay: Number. default 5000ms. Time to wait before erasing the text.
  • typingDelay: Number. default 2500ms. Time to wait before starting to type.
  • cursor: String. Default: |
  • cursorClassName: String

About

Simulates typing effect, eraser effect and a blinking cursor.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published