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