1.0.17 • Published 4 years ago
@isaac.scarrott/react-type-it v1.0.17
React-Type-It
Simulate typing in a react component. Supports delay backspace and timing. Minimal dependency
Install
npm i @isaac.scarrott/react-type-it
Usage
import TypeIt, {TypeItInput} from '@isaac.scarrott/react-type-it';
<TypeIt
loop
className='typeItDemo'
style={{ color: "SteelBlue", fontSize: "40px" }}
>
<TypeItInput>
Hi, this is a react type it demo
</TypeItInput>
<TypeItInput backspace={28} delay={2000}>
I hope you like this packgae
</TypeItInput>
<TypeItInput backspace={3} delay={300} duration={300}>
age
</TypeItInput>
<TypeItInput backspace={28} delay={2000}>
this is also my first NPM package
</TypeItInput>
<TypeItInput delay={2000}></TypeItInput>
</TypeIt>
Props
Component | Name | Type | Default | Description |
---|---|---|---|---|
TypeIt | loop | boolean | false | Describes if the type animation loops |
TypeIt | style | object | {} | Styles to be put on the text |
TypeItInput | duration | number | 2000 | Length of the animation (without delay) in ms |
TypeItInput | delay | number | 0 | Delay that the animation after which the animation will start |
TypeItInput | backspace | number | 0 | Number of characters that the component will backspace before typing |