1.0.2 • Published 3 years ago
typingtext v1.0.2
About
This is a simple component that utilises basic CSS and React.js to create typing like animation to the provided text or JSX element.
Example
Installation
npm install typingtext
Usage
import {TypingText} from 'typingtext';
<div>
<TypingText
lines = {["Hello!","This is typing text"]},
options = {{
intervals: [1000,200],
pipeColor: "green",
pipeWidth: "5px",
fontColor: "#000",
fontSize: "20px",
pipeAnimationLength: "0.8",
placement : "center",
userSelect : "all"
}}
/>
</div>
Parameters
TypingText component takes two parameters. They are:
- Lines : Array : Takes plain strings or any JSX element.
- Options : There are several options to customise the component. Accepted options are: intervals : Array : Time allocated(in ms) for the corresponding index's line. Default value is 1000(ms). pipeColor : String : Accepts any valid CSS input : Color of the pipe after the characters. Defaults to red. pipeWidth : String : Accepts any valid CSS input : Width of the pipe. fontColor : String : Accepts any valid CSS input : String's color. pipeAnimationLength : String : Pipe blinking duration in seconds. placement : String : Accepts any valid CSS input : similar to css grid's placement items property.