Simulates typing effect, eraser effect and blinking cursor.
npm install react-typing-effectThis 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.
``javascript
import React from 'react';
import ReactTypingEffect from 'react-typing-effect';
const ReactTypingEffectDemo = () => {
return (
<>
/>
cursorRenderer={cursor =>
;
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`