0.0.11 • Published 1 year ago
@jaiminmoslake7020/react-typing-text v0.0.11
React Component Package
It is a package that contains reusable React component which is built with Styled-Components, React and TypeScript. This package allows a typing text animation feature.
Website
https://react-typing-text.netlify.app/
Installation
npm install @jaiminmoslake7020/react-typing-textHow to use it
import { TypingText } from "@jaiminmoslake7020/react-typing-text";<TypingText as={"p"}
text={"Some text you want to have!"}
duration={100}
className=" any-styling-class "
/>Component Properties
TypingTextPropTypes
| Properties | Type | Values | Default |
|---|---|---|---|
| as? | p | h1 | h2 | h3 | h4 | h5 | h6 | "p", "h1", "h2", "h3", "h4", "h5", "h6" | "p" |
| text | string | "Some text you want to have!" | |
| duration? | number | 100 (in milliseconds) | 100 |
| className? | string | "any-styling-class" | |
| cursor? | CursorPropTypes | {symbol: "any character", className?:"any-styling-class"} | {symbol: "|", className?:"cursor-symbol-default-class"} |
| noCursor? | boolean | true, false | false |
| spaceAtTextEnd? | boolean | true, false | false |
| eachCharAsSpan? | boolean | true, false | false |
CursorPropTypes
| Properties | Type | Values | Default |
|---|---|---|---|
| symbol | p | h1 | h2 | h3 | h4 | h5 | h6 | "any character" | "|" |
| className? | string | "any-styling-class" | "cursor-symbol-default-class" |