React Typist
React Component for making typing animations. Wrap Typist
around your text or any element tree to animate text inside the tree. Easily stylable and highly configurable.
Install
npm install react-typist --save
Live Example
Basic Usage
CommonJS Module (using webpack or browserify):
import React, {Component} from 'react'; import Typist from 'react-typist'; export default class MyComponent extends Component { render() { return ( <Typist> Animate this text. </Typist> ); } }
UMD module:
Include dist/standalone/Typist.js
into your build, using whatever build tool or manually entering a <script>
tag.
CSS
Typist contains a simple CSS file to make the cursor at the end of the text blink. To include it, you must include dist/Typist.css
in your build.
Children
Typist will animate any text present in its descendents. Each text node will be animated as it is encountered in depth-first traversal of the children
tree, one after the other.
Typist can take as children
any valid node that can be rendered in a React application, i.e. it could be undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.
This also implies that you are free to pass any props to the children
of Typist, including your own css classes (as in any React application). This allows you to easily style your text inside Typist:
<Typist> <span className="my-custom-class"> First Sentence </span> <br /> <div className="container"> <p> This will be animated after first sentence is complete </p> <MyComponent prop1="val1"> More text. </MyComponent> </div> Final sentence </Typist>
Refer to examples/
for more examples.
Typist.Delay
In order to insert delays into your animation, you can use the Typist.Delay
Component:
<Typist> <p> First Sentence </p> <Typist.Delay ms={500} /> <br /> This won't be animated until 500ms after the first sentenced is rendered </Typist>
Refer to examples/
for more examples.
Typist.Delay Props
ms
Required
Milliseconds to apply for the delay
Typist.Backspace
Typist also supports backspace animations via the Typist.Backspace
Component:
<Typist> <span> First Sentence </span> <Typist.Backspace count={8} delay={200} /> <span> Phrase </span> </Typist>
Refer to examples/
for more examples.
Typist.Backspace Props
count
Default: 1
Number of characters to backspace
delay
Default: 0
Delay in milliseconds before the backspace animation starts
Typist Props
className
avgTypingDelay
stdTypingDelay
startDelay
cursor
onCharacterTyped
onLineTyped
onTypingDone
delayGenerator
className
Default: null
CSS class name to be applied to the Typist root node. Typist will always have the CSS class Typist
applied to it.
<Typist className="MyTypist"> Animate this text. </Typist>
will produce:
<div class="Typist MyTypist"> Animate this text. </div>
avgTypingDelay
Default: 70
Average typing delay in milliseconds between every keystroke of the typing animation (Less is faster). The distribution of the typing delays between strokes is not uniform, to make the animation more human like.
stdTypingDelay
Default: 25
Standard deviation of typing delay between keystrokes of the typing animation. (Less means more uniform, i.e. less variance between values).
startDelay
Default: 0
Milliseconds before typing animation begins.
cursor
Default:
{ show: true, blink: true, element: '|', hideWhenDone: false, hideWhenDoneDelay: 1000, }
Object containing options for cursor:
show (bool)
: whether to display cursor at the end of text.blink (bool)
: whether to add blinking animation to cursor. You must also include the csselement (string)
: character to use for the cursorhideWhenDone (bool)
: whether the cursor should be hidden after tyiping animation is complete.hideWhenDoneDelay (int)
: delay in ms to be applied before hiding cursor when typing animation is complete.
onCharacterTyped
Function to be called every time a character is typed on the screen.
function(character, charIdx) { ... }
onLineTyped
Function to be called every time a line is typed on the screen.
function(line, lineIdx) { ... }
onTypingDone
Function to be called when typing animation is complete.
delayGenerator
Default: gaussianDistribution
Function to be called to generate the typing delay (in ms) for every keystroke of the animation. Every time this function is called it should return a value in milliseconds. This function can be used to provide your own typing delay distribution, for example uniform (e.g. always 100ms), or a deterministic distribution.
However, if you wish to insert delays at specific points in the animation, consider useing the Delay
Component instead.
function(mean, std, current = {line, lineIdx, character, charIdx, defDelayGenerator}) { ... }
mean (number)
: Average typing delay. Will be the value ofprops.avgTypingDelay
std (number)
: Standard deviation of typing delay. Will be the value ofprops.stdTypingDelay
current.line (string)
: Value of line of text (Typist child) currently being animated.current.lineIdx (int)
: Index of line of text (Typist child) currently being animated.current.character (string)
: Value of character that was just rendered.current.charIdx (int)
: Index of character that was just rendered.current.defDelayGenerator (function)
: Reference to default delay generator function to be able to fall back to.
This function can also be used to introduce delays at specific points in the typing animation.
e.g.:
function(mean, std, {line, lineIdx, charIdx, defDelayGenerator}) { // Delay the animation for 2 seconds at the last character of the first line if (lineIdx === 0 && charIdx === line.length - 1) { return 2000; } return defDelayGenerator(); }
Troubleshooting
Internet Explorer Compatibility
React Typist makes use of Array.from() which is not supported in IE.
SCRIPT438: Object doesn't support property or method 'from' Typist.js (449,1)
To resolve this, babel-polyfill can be added to your project.
npm install --save babel-polyfill
You can now include this module in your app at the entry point.
ES6:
import 'babel-polyfill'
CommonJS:
require('babel-polyfill')
Development
To build the examples and start the dev server, run:
npm start
Now, open http://localhost:8080
and start hacking!
If you just want to build the examples, run:
npm run examples
Running Tests
npm test