React typeout
Simply a React Component that types by itself. Add any Array of strings, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Installation
Install the package from npm
npm install --save react-typeout
Usage
Basic Example
;;; const words = 'the first sentence' 'the second sentence'; { return <TypeOut words=words /> } ;
Props
words
: PropTypes.arrayof(PropTypes.string).isRequired
The words
property is the only required prop. Here you set all the words/sentences you would like it to type out.
random
: PropTypes.bool
The random
property specifies wether the array of words should be typed out in its correct order or random order.
Defaults to: false
infinitive
: PropTypes.bool
The infinitive
property specifies if words can be typed multiple times
Defaults to: true
typeSpeed
: PropTypes.number
The typeSpeed
property specifies the speed of each char in the sentence to be typed.
Defaults to: 200
rewindSpeed
: PropTypes.number
The rewindSpeed
property specifies the speed of each char in the sentence to be typed back.
Defaults to: 50
pauseSpeed
: PropTypes.number
The pauseSpeed
property specifies the we will wait before typing out next word/sentence after one is complete.
Defaults to: 1000
Node
: PropTypes.string
The Node
property specifies the tag type our text will be rendered inside
Defaults to: span
className
: PropTypes.string
The className
property specifies the class that react-typeout will have
Defaults to: react-typeout
caret
: PropTypes.bool
The caret
property specifies if react-typeout should render a caret after the word, See styling documentation best result. Caret will always use the className
of react-typeout-caret
Defaults to: false
done
: PropTypes.func
The done
property specifies if a method should be called then react-typeout has no words left to print. infinitive
needs to be false
Defaults to: null
Styling
Basic caret styling
@ 50% 100% }@- 50% 100% }@- 50% 100% }@- 50% 100% }@- 50% 100% }
License
MIT. Copyright (c) 2017 Philip Knape.