This is a UI component built completely in React that simulates typing effect, eraser effect and a blinking cursor.
$ npm install --save react-typing-effect
ReactTypingEffect
is the main component.
import React from 'react';
import ReactTypingEffect from 'react-typing-effect';
const ReactTypingEffectDemo = () => {
return (
<ReactTypingEffect
text="Hello." //text=["Hello.", "World!"]
/>
);
};
Inspired by this blog post http://burnmind.com/tutorials/how-to-create-a-typing-effect-an-eraser-effect-and-a-blinking-cursor-using-jquery
text
: That text that will be typed and erased. Can be either anarray
of strings or just astring
.
staticText
:String
. Text that will just be static and cannot be typed or erased.className
:String
speed
:Number
. default500
ms. Typing speed.eraseDelay
:Number
. default5000
ms. Time to wait before erasing the text.typingDelay
:Number
. default2500
ms. Time to wait before starting to type.cursor
:String
. Default:|
cursorClassName
:String