How to add Animated typing to your React App

So many of us seen websites which show typing text on there landing page. Most of the time we don’t really know which library they are using to perform that typing animation. In this article you will gonna learn how to add animated typing to your React App.

What is ITyped ?

ITyped is a simple library which is used to create animated typing for web apps. This library is super simple to use. The most interesting thing is that this library doesn’t use any dependency and its size is also 2KB. It also not uses any JQuery internally.

Installation & Usage

This article is for React app so we will gonna use React code for example. First of all let’s start with installing ityped. You can install it from yarn and npm.

npm install ityped

yarn add ityped

Let’s import init function from ityped.

import { init } from 'ityped'

This init function accept two parameter. First parameter is the element ref and second parameter is options of object type.

    const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })

Full example will gonna look like this.

  import React, { Component } from 'react'
  import { init } from 'ityped'

  export default class Hello extends Component {
    componentDidMount(){
      const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })
    }
    render(){
      return <div id="myElement"></div>
    }
  }

It uses various cool options for customization.

 init("#element", {

    /**
     * @param {Array} strings An array with the strings that will be animated 
     */
     strings: ['Put your strings here...', 'and Enjoy!']

    /**
     * @param {Number} typeSpeed Type speed in milliseconds
     */
     typeSpeed:  100,

    /**
     * @param {Number} backSpeed Type back speed in milliseconds
     */
     backSpeed:  50,

    /**
     * @param {Number} startDelay Time before typing starts
     */
     startDelay: 500,

    /**
     * @param {Number} backDelay Time before backspacing
     */
     backDelay:  500,

    /**
     * @param {Bollean} loop The animation loop
     */
     loop:       false,

    /**
     * @param {Bollean} showCursor Show the cursor element
     */
     showCursor: true,

    /**
     * @param {Bollean} placeholder Write the string in the placeholder content
     */
     placeholder: false,

    /**
     * @param {Bollean} disableBackTyping Disable back typing for the last string sentence 
     */
     disableBackTyping: false,

    /**
     * @property {String} cursorChar character for cursor
     */
     cursorChar: "|",


    // optional: The callback called (if `loop` is false) 
    // once the last string was typed
    /**
     * @property {Function} onFinished The callback called , if `loop` is false,
     * once the last string was typed
     */
    onFinished: function(){},
  }

Feel free to checkout the codesandbox demo.

How to write complex layouts in one line of Css