Thomva/react-typetool

Type animation for React

react-typetool

Type animation for React | React Typetool

React component to simulate typing. You can customize the caret by calling the caret reference.

Install

npm install react-typetool --save

Usage

import React, { Component } from 'react';
import Typer from 'react-typetool';

class App extends Component {
  render() {
    return <Typer text="Text to type." />
  }
}

Properties

prop	optional	type	description	default	example
text	yes	string	Text to type		'Hello earthlings!'
classes	yes	string	Classes to add to the component		'introTyper'
useDefaultStyle	yes	boolean	Apply default style? (Set false to style with your own CSS)	true	false
startStep	yes	number	Index of string character to start from	0	5
stepIntervalMS	yes	number	Time between each character in milliseconds	200	240
blink	yes	boolean	Should the caret blink?	true	false
blinkIntervalMS	yes	number	Time between each caret blink in milliseconds	500	300
onStart	yes	callback	Gets called when the animation starts		() => { console.log('Started typing') }
onFinish	yes	callback	Gets called when the animation is finished		() => { console.log('Done typing') }
showCaret	yes	boolean	Should the caret be shown?	true	false
getCaretRef	yes	callback	Returns the reference to the React component		(ref) => { console.log(ref) }
loop	yes	boolean	Should the animation loop?	false	true
loopIntervalMS	yes	number	Time between end of animation and start of next loop in milliseconds	2000	500
replay	yes	boolean	Replay loop? (Change to false in onStart for best results)	false	true
startInstantly	yes	boolean	Should the animation begin instantly?	false	true

License

MIT © Thomva