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.

$3

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

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




text={["Hello.", "World!!!"]}
cursorRenderer={cursor =>

{cursor}

}
displayTextRenderer={(text, i) => {
return (



{text.split('').map((char, i) => {
const key = ${i};
return (
key={key}
style={i%2 === 0 ? { color: 'magenta'} : {}}
>{char}
);
})}



);
}}
/>

);
};
`

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

$3

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

$3

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