Repository files navigation

React Component for making typing animations. WrapTypist around your text or anyelement tree to animate text inside the tree. Easily stylable and highlyconfigurable.

npm install react-typist --save

• Basic example

importReact,{Component}from'react';importTypistfrom'react-typist';exportdefaultclassMyComponentextendsComponent{render(){return(<Typist>        Animate this text.</Typist>);}}

Includedist/standalone/Typist.js into your build, using whatever build toolor manually entering a<script> tag.

Typist contains a simple CSS file to make the cursor at the end of the textblink. To include it, you must includedist/Typist.css in your build.

Provide a uniquekey prop toTypist so that it would re-render every time your dynamic content is changed like that:

import React, { useState } from "react";import Typist from "react-typist";export default const DynamicTypist = () => {  const texts = ["first text", "second text", "third text"];  const [currentTextCounter, setCurrentTextCounter] = useState(0);  return <div onClick={() => if (currentTextCounter < texts.length - 1) { setCurrentTextCounter(currentTextCounter + 1) }}>    <Typist key={currentTextCounter}>      {texts[currentTextCounter]}    </Typist>  </div>}

Otherwise your dynamic contentwon't be reflected and re-typed.

Typist will animate any text present in its descendents. Each textnode will be animated as it is encountered in depth-first traversal of thechildren tree, one after the other.

Typist can take aschildren any valid node that can be rendered in a Reactapplication, 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 thechildren of Typist,including your own css classes (as in any React application). This allows you toeasily style your text inside Typist:

<Typist><spanclassName="my-custom-class"> First Sentence</span><br/><divclassName="container"><p> This will be animated after first sentence is complete</p><MyComponentprop1="val1"> More text.</MyComponent></div>  Final sentence</Typist>

Refer toexamples/ for more examples.

In order to insert delays into your animation, you can use theTypist.DelayComponent:

<Typist><p> First Sentence</p><Typist.Delayms={500}/><br/>  This won't be animated until 500ms after the first sentenced is rendered</Typist>

Refer toexamples/ for more examples.

• ms

Required

Milliseconds to apply for the delay

Typist also supports backspace animations via theTypist.Backspace Component:

<Typist><span> First Sentence</span><Typist.Backspacecount={8}delay={200}/><span> Phrase</span></Typist>

Refer toexamples/ for more examples.

• count
• delay

Default:1

Number of characters to backspace

Default:0

Delay in milliseconds before the backspace animation starts

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

Default:null

CSS class name to be applied to the Typist root node. Typist will alwayshave the CSS classTypist applied to it.

<TypistclassName="MyTypist"> Animate this text.</Typist>

will produce:

<divclass="Typist MyTypist"> Animate this text.</div>

Default:70

Average typing delay in milliseconds between every keystroke of the typinganimation(Less is faster). The distribution of the typing delays betweenstrokes 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, i.e. 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): whether to display cursor at the end of text.
• blink (bool): whether to add blinking animation to cursor. You must alsoinclude thecss
• element (string): character to use for the cursor
• hideWhenDone (bool): whether the cursor should be hidden after typinganimation is complete.
• hideWhenDoneDelay (int): delay in ms to be applied before hiding cursor whentyping 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 keystrokeof the animation. Every time this function is called it should return a valuein milliseconds. This function can be used to provide your own typing delaydistribution, for example uniform (e.g. always 100ms), or a deterministicdistribution.

However, if you wish to insert delays at specific points in the animation,consider using theDelay 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 delaygenerator function to be able to fall back to.

This function can also be used to introduce delays at specific points in thetyping animation.

e.g.:

function(mean,std,{line, lineIdx, charIdx, defDelayGenerator}){// Delay the animation for 2 seconds at the last character of the first lineif(lineIdx===0&&charIdx===line.length-1){return2000;}returndefDelayGenerator();}

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

To build the examples and start the dev server, run:

npm start

Now, openhttp://localhost:8080 and start hacking!

If you just want to build the examples, run:

npm run examples

npmtest

MIT