React Component for typing animations. Wrap Typist around your text or any ReactComponent tree to animate text inside the tree. Easily stylable and highly configurable.

npm install react-typist --save

• Basic example

import React, {Component} from 'react';
import Typist from 'react-typist';

export default class MyComponent extends Component {

  render() {
    return (
      <Typist>
        Animate this text.
      </Typist>;
    );
  }
}

Include dist/standalone/Typist.js into your build, using whatever build tool or manually entering a <script> tag.

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.

Typist will animate any text present in its children and 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 receive as children any objects a regular ReactComponent can.

You can use any props in the children you pass to Typist, including your own css classes. 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.

• className
• avgTypingDelay
• stdTypingDelay
• startDelay
• cursor
• onCharacterTyped
• onLineTyped
• onTypingDone
• delayGenerator

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>

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.

Default: 25

Standard deviation of typing delay between keystrokes of the typing animation. (Less means more uniform, less variance between values).

Default: 0

Milliseconds before typing animation begins.

Default:

{
  show: true,
  blink: true,
  element: '|',
  hideWhenDone: false,
  hideWhenDoneDelay: 1000,
}

Object containing options for cursor:

• show (bool): wether to display cursor at the end of text.
• blink (bool): wether to add blinking animation to cursor. You must also include the css
• element (string): character to use for the cursor
• hideWhenDone (bool): wether 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.

Function to be called every time a character is typed on the screen.

function(character, charIdx) {
  ...
}

Function to be called every time a line is typed on the screen.

function(line, lineIdx) {
  ...
}

Function to be called when typing animation is complete.

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, e.g. uniform (always 100ms) or even deterministic.

function(mean, std, current = {line, lineIdx, character, charIdx, defDelayGenerator}) {
  ...
}

• mean (number): Average typing delay. Will be the value of props.avgTypingDelay
• std (number): Standard deviation of typing delay. Will be the value of props.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.defaultDelayGenerator (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();
}

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')

Run:

npm start

to build the examples and start the dev server. Now, open http://localhost:8080 and start hacking!

If you just want to build the examples run:

npm run examples

• Support delays in typing animation
• Support arbitrary element trees
• Refactor logic outside component, better maintainability
• Improve performance of rendering arbitrary element trees
• Support backspace animation

npm test

MIT