Mimic Human Typing With Write and Delete JavaScript Component

Preview:

Description:

Write and Delete is a JavaScript library (web component) for mimicking a realistic human typing behavior on the web.

Features:

• Rorate through an array of strings.
• Infinite loop.
• Custom quota of typos.
• Blinking cursor.

How to use it:

1. Import the Write and Delete.

<script src="dist/lib.js"></script>
// or as a web component
<script src="dist/webcomponent.js" defer></script>

2. Initialize the library and define an array of strings to be printed on the page.

writeAndDelete(document.querySelector("#container"), [
  `Text to type 1`,
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // options here
});

3. You can also use it as a web component.

<write-and-delete>String1, String2, String3, String4</write-and-delete>

4. Possible options to config the typing animation.

writeAndDelete(document.querySelector("#container"), [
  `Text to type 1`,
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // timeout in ms
  timeout: 1000,
  // animation speed
  speed: 300,
  // variation for the speed option
  speedVariation: undefined,
  // infinite loop
  loop: true,
  // quota of typos
  errorQuota: 0
  // Custom string of characters used for the typo errors
  errorCharacterMap: undefined,
  // custom cursor
  cursor: '_',
  // speed of binking animation
  cursorSpeed: undefined,
});

// or 
<write-and-delete timeout="1000" loop="true" speed="200">String1, String2, String3, String4</write-and-delete>