Type Writer

A nice javascript plugin to add cool typing text effect to your site.

Play it on code sandbox

Installation

Usage

• Install the plugin

npm install --save @zaichaopan/type-writer

• Import the class

import TypeWriter from '@zaichaopan/type-writer';

• Instantiate a TypeWriter instance and pass through your config option Object. Supported options:

  • texts: an array to hold all the texts you want to type into your page.

  • selector: a valid html DOM which can be turned into a type writer. You can also pass a string as selector which can be used by document.querySelector.

  • speed: an integer (milliseconds) to specify the speed of typing. The default value is 100 (milliseconds).

  • blinkInterval. an integer (milliseconds) to specify the cursor blinking interval after finishing typing each text item in the texts array. The default value is is 200 (millisecond).

  • clear: a boolean used to specify whether you want to clear the text from its last char when the text has been typed out. The default value is true. If the value is false, the whole text will be removed at one time after it has been typed out.

  • loop: a boolean used to specify whether you want to keep looping through all texts in the texts array from the first item after all of them have been typed out. The default value is true.

  • lineBreak: a boolean used to specify whether you want to type each text in the texts array in a new line. The default value is false. If you want to type each text in a new line, set it to false.

A typical TypeWriter instance will look like

import TypeWriter from '@zaichaopan/type-writer';

let input = document.querySelector('input.type-writer');
const texts = ['Javascript', 'Vue', 'React', 'Angular'];

let inputTypeWriter = new TypeWriter({
  texts,
  selector: input,
  speed: 100, // default value will be used if it is omitted
  loop: true, // default value will be used if it is omitted
  blinkInterval: 200, // default value will be used if it is omitted
  clear: true, // default value will be used if it is omitted
  lineBlink: false // // default value will be used if it is omitted
});

• Start Typing

You can start typing by calling start method of the the instance you created.

inputTypeWriter.start();

// or if you prefer to start typing after a few delay
setTimeout(() => { inputTypeWriter.start(); }, 400);

• Stop Typing

You may to want to add some interaction to your site by letting user start or stop the typing. To do that, you only need to call stop method of the instance to stop typing and call start method to start typing again.

inputTypeWriter.stop();

Note:

The stop method will stop typing and clear all the timers set by the start methods.

Examples

You can find more useful examples by navigating to the examples directory. Or you can Play it on code sandbox