autotyper

⌨️ A simple, lightweight JavaScript package for automatically typing text.

⚖ Has a file size of 2.15 kB, minified and gzipped.
🔎 Text can be read directly from an element (SEO friendly).
🔧 Can be used with or without an HTMLElement.
⚙ Provides configurable options.
📡 Emits events for triggering custom functionality.
💵 Available as a standalone jQuery plugin.

See it in action on CodePen!

Installation

Yarn

yarn add autotyper

npm

npm install --save autotyper

Usage

With an HTMLElement:

import autotyper from 'autotyper';

const example = Object.create(autotyper);
const element = document.querySelector('.js-element');
const options = {
  text: 'Hello World.',
};

example.init(element, options);

Without an HTMLElement:

import autotyper from 'autotyper';

const example = Object.create(autotyper).init({
  text: 'Look, Mom, no element!',
});

// `example.text` updates when a new character is typed

// listen for the 'type' event
example.on('type', (text) => {
  // do something with `text`
});

CommonJS

const autotyper = require('autotyper').default;

AMD

require(['autotyper'], function (autotyper) {
  // use `autotyper.default` here
});

Options

const defaults = {
  text: element.innerHTML || 'This is the default text.',
  interval: [200, 300],
  autoStart: true,
  loop: false,
  loopInterval: 0,
  empty: '\u00A0',
};

See the API for more information.

Pass Options with HTML Data Attributes

Options can be passed via HTML data attributes. Either as individual properties or a single options object. The attribute names should be:

prefixed with 'autotyper'
in param case

The attribute values should be JSON formatted strings.

<!-- Options passed as a single JSON formatted object -->
<p data-autotyper-options='{ "text": "This is the text that is typed." }'>
  This is some example text.
</p>

<!-- The `autoStart` option being passed as an individual value -->
<p data-autotyper-auto-start="2000">
  This is some different example text.
</p>

Browser Support

autotyper is written and compiled in a way that it should support the majority of browsers, old and new. However, these are the browsers for which we offer official support. Should you find a bug in the package, don't hesitate to submit an issue and we'll assist you as best we can.


Edge	Firefox	Chrome	Safari	Opera
Last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Alternative Installation

If you're not using a module bundler or npm as your package manager then the following methods are available to you.

Bower

bower install autotyper=https://unpkg.com/autotyper/dist/index.min.js

Download

The latest version of the UMD build (bundled and minified) is available for download:

index.min.js

CDN

All versions and formats of the module are available via unpkg:

<!-- Use a specific release (replace `x.x.x` with a version number) -->
<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
<!-- Use the latest minor or patch release (replace `x` with a version number) -->
<script src="https://unpkg.com/autotyper@x/dist/index.min.js"></script>
<!-- DANGER: Use the latest major release (could introduce breaking changes) -->
<script src="https://unpkg.com/autotyper/dist/index.min.js"></script>

<script>
  // Package available via `window.autotyper.default`
</script>

API

autotyper.init([element, ][options])

Arguments

[element] (HTMLElement): The element to type in.

[options={}] (Object): The options object.

[options.text=element.innerHTML|'This is the default text.'] (string): The text to type.

[options.interval=[200, 300]] (number|number[min, max]|function): The number of milliseconds between each keystroke or a min and max number of milliseconds to randomise between or a function that returns a number of milliseconds.

[options.autoStart=true] (boolean|number): Specify whether to start() automatically or the number of milliseconds to delay.

[options.loop=false] (boolean|number): Specify whether to loop or the number of times to loop.

[options.loopInterval=0] (number|number[min, max]|function): The number of milliseconds between each loop or a min and max number of milliseconds to randomise between or a function that returns a number of milliseconds.

[options.empty='\u00A0'] (string|boolean): The first character to type or a boolean specifying whether the first character should be empty.