Create Typing Effects Programmatically – tool-typewriter

Preview:

Description:

tool-typewriter is a native JavaScript library that helps you create a typewriter effect programmatically.

How to use it:

1. Download and import the tool-typewriter.

import Typewriter from './lib/Typewriter.js'

2. Create an empty DIV element to place the text.

<div id="letter"></div>

3. Initialize the tool-typewriter.

const typewriter = new Typewriter('#letter', {
      // options here
})

4. Type something on the screen.

typewriter
  .typeString('Text To Print')

5. Set a time to wait before executing the next function.

typewriter
  .pauseFor(1000);

6. Delete a number of characters.

typewriter
  .deleteChars(6);

7. Delete all characters.

typewriter
  .deleteAll(10);

8. Start & stop the typing effect.

typewriter
  .start()
  .stop()

9. Available options.

const typewriter = new Typewriter('#letter', {
      loop: false,
      delay: getRandomInteger(120, 160),
      deleteSpeed: getRandomInteger(40, 80),
      defaultPauseFor: 1500,
      wrapperClassName: 'Typewriter__wrapper',
      cursorClassName: 'Typewriter__cursor',
      cursor: '|',
      skipAddStyles: false,
})