super-typer.jsis a JavaScript library that allows you to create a typing effect on your website.
- Installation
- Usage
-
Typer API
- Constructor
- Properties
-
Methods
- setGlobalOptions(options)
- setGlobalCallbacks(callbacks)
- addCommand(command)
- addCommands(commands)
- clearCommands()
- start()
- pause()
- reset()
- type(text, options, callbacks)
- backspace(count, options, callbacks)
- arrowLeft(count, options, callbacks)
- arrowRight(count, options, callbacks)
- wait(time, options, callbacks)
In the CDN installation selection, you have the choice between the Global or ES Module import methods.
The Global import method is as follows:
<html>
<head>
...
<script src="https://unpkg.com/super-typer/dist/super-typer.global.js"></script>
...
</head>
<body>
...
</body>
</html>The ES Module import method is as follows:
<html>
<head>
...
</head>
<body>
...
<script type="module">
import Typer from "https://unpkg.com/super-typer/dist/super-typer.esm.js";
</script>
</body>
</html>You can install super-typer using package managers like npm, yarn, or pnpm.
npm install super-typeryarn add super-typerpnpm install super-typersuper-typer.js is very easy to use and has a very simple API.
The basic usage of super-typer.js is as follows:
// Create a new instance of Typer.
const superTyper = new Typer(
{
// The speed of the typing effect in milliseconds.
speed: 100,
// The onChange function is called every time when the text changes.
onChange: (text) => {
console.log(text);
},
}
);
const commands = [
{
// The "command" property is the command which will be executed.
// The "type" command is used to type text.
command: "type",
// The "argument" property is command's argument.
argument: "Hello!",
},
{
// The "backspace" command is used to delete text.
// It's like pressing the backspace key.
command: "backspace",
// The "backspace" command accepts a number as an argument,
// which is the number of characters to delete.
//
// A `-1` value means that the whole text will be deleted.
argument: -1,
}
];
// Add commands to the Typer instance.
superTyper.addCommands(commands);
// Start to type.
superTyper.start();The constructor of Typer accepts three arguments, the global options object, the global callbacks object, and the commands array, for example:
new Typer(/* global options */, /* commands */);The global options object is used to configure the Typer instance, it accepts the following properties:
{
// The speed of the typing effect in milliseconds, default value is 100.
speed: 100,
// The onChange function is called every time when the text changes.
// The "text" argument is the current text, and the "cursorPosition" argument is the current cursor position in the text.
onChange: (text, cursorPosition) => {},
// The onBeforeChange function is called before the text changes.
onBeforeChange: (text, cursorPosition) => {},
// The onAfterChange function is called after the text changes.
onAfterChange: (text, cursorPosition) => {},
}The commands array is a list of commands that will be executed by the Typer instance. A command is an object that has four properties, for example:
{
// The "command" property is the command which will be executed.
// The "type" command is used to type text.
// The available commands for the command are: "type", "backspace", "arrowLeft", "arrowRight", and "wait".
command: "type",
// The "argument" property is command's argument.
argument: "Hello!",
// The "options" property is the same as the constructor's "global options" argument and will override it.
options: {
speed: 80,
onChange: (text, cursorPosition) => {},
onBeforeChange: (text, cursorPosition) => {},
onAfterChange: (text, cursorPosition) => {},
}
}The isRunning property is a getter that returns a boolean value indicating whether the Typer instance is running or not.
The isPaused property is a getter that returns a boolean value indicating whether the Typer instance is paused or not.
The setGlobalOptions method is used to set the global options of the Typer instance.
The second argument is optional, if it is true, the options will be merged with the existing global options, otherwise, the options will replace the existing global options.
The addCommand method is used to add a command to the Typer instance, it accepts a command as an argument.
The addCommands method is used to add commands to the Typer instance, it accepts an array of commands as an argument.
The clearCommands method is used to clear all commands from the Typer instance.
The start method is used to start the execution of the commands.
The pause method is used to pause the execution of the commands.
The reset method is used to stop execution and clear the all commands.
The type method simulates text input, it is used to add a type command and start the execution of the commands. It accepts three arguments, following is the description of each argument:
-
text: The content to be typed. -
options: The options of this command, it will override theglobal options.
The backspace method simulates a backspace keypress, it is used to add a backspace command and start the execution of the commands. It accepts three arguments, following is the description of each argument:
-
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of-1, the result is "Hello". If the value is-2, the text becomes "Hello". Thus, a value of-1is equivalent to deleting the entire text. -
options: The options of this command, it will override the Global Options.
The arrowLeft method simulates a left arrow keypress, it is used to add a arrowLeft command and start the execution of the commands. It accepts three arguments, and same as the backspace method, following is the description of each argument:
-
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of-1, the result is "Hello". If the value is-2, the text becomes "Hello". Thus, a value of-1is equivalent to deleting the entire text. -
options: The options of this command, it will override the Global Options.
The arrowRight method simulates a right arrow keypress, it is used to add a arrowRight command and start the execution of the commands. It accepts three arguments, and same as the backspace method, following is the description of each argument:
-
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of-1, the result is "Hello". If the value is-2, the text becomes "Hello". Thus, a value of-1is equivalent to deleting the entire text. -
options: The options of this command, it will override the Global Options.
The wait method is used to add a wait command and start the execution of the commands. It accepts one argument, following is the description of each argument:
-
time: The time to wait in milliseconds. -
options: The options of this command, it will override the Global Options.