⌨️ 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!
yarn add autotyper
npm install --save autotyper
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`
});
const autotyper = require('autotyper').default;
require(['autotyper'], function (autotyper) {
// use `autotyper.default` here
});
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.
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>
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 |
If you're not using a module bundler or npm
as your package manager then the following methods are available to you.
bower install autotyper=https://unpkg.com/autotyper/dist/index.min.js
The latest version of the UMD build (bundled and minified) is available for download:
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/autotyper@x.x.x/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>
[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.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
(Object): Returns the autotyper
instance.
autotyper
is an event emitter. You can bind to the following events using autotyper.on(eventName, callback)
:
text (string): The current text value.
character (string): The character that was typed.
loopCount (number): The number of times the instance has looped.
MIT © Saul Hardman