TypingWriter

A package that let's you write text on the screen! (With support for the way Korean is typed!)

Instalation

# npm
npm install typingwriter

# yarn
yarn add typingwriter

Usage

Importing

TypeScript

// Here we're importing the default export "TypingWriter", which is the TypingWriter class that returns promises
// as well as the "AsyncTypingWriter" class which is the TypingWriter class but it doesn't return promises and it queues all events.
import TypingWriter, { AsyncTypingWriter } from "typingwriter";

JavaScript

// Here we're importing the default export "TypingWriter", which is the TypingWriter class that returns promises
// as well as the "AsyncTypingWriter" class which is the TypingWriter class but it doesn't return promises and it queues all events.
const {
	AsyncTypingWriter,
	default: TypingWriter
} = require("language-flag-colors");

Or, if you only want the default TypingWriter

const TypingWriter = require("language-flag-colors");

Or if you only want the AsyncTypingWriter

const { AsyncTypingWriter } = require("language-flag-colors");

Using the classes

import TypingWriter, { AsyncTypingWriter } from "typingwriter";

// initialize the TypingWriter on the element with the id "target".
const typer = new TypingWriter("#target");

// write the text that was inside of the target element
await typer.write();

// write the given text
await typer.write("TypingWriter");

// delete all the text in the target element
await typer.delete();

// delete 8 characters from the target element
await typer.delete(8);

// delete 8 characters from the target element but skip the first 5
await typer.delete(8, 5);

// pause any active deleter or writer
typer.pause();

// continue any paused deleter or writer
typer.continue();

// wait 5seconds
await typer.wait(5000);

// fully exit the class and remove any wrappers
typer.exit();

const asynctyper = new AsyncTypingWriter("#target");

// same as the TypingWriter but you can queue everything;
asynctyper.write().delete(8).wait(5000).delete(8, 5).exit();

Available options

The options object can be passed the to classes as the second argument.

Option	Description	Available values
cursor	the character the cursor should be	string | false (false to disable cursor), default: "|"
typingInterval	the interval in which text should be typed	"humanized" | number | [number, number], default: "humanized", the array of numbers is to get a random interval between given numbers.
deleteInterval	the interval in which text should be deleted	"humanized" | number | [number, number], default: "humanized", the array of numbers is to get a random interval between given numbers.
autoStart	automatically start typing on class creation	boolean, default: false
append	append text given in write to existing text of the element	boolean, default: false
cursorStyles	whether or not the cursor styling should be added to the DOM	boolean, default: true
cursorClassName	the class name the cursor should get	string, default: "typingwriter__cursor"
wrapperClassName	the class name the wrapper should get	string, default: "typingwriter__wrapper"
loop	(only for AsyncTypingWriter) loop the given queue	boolean, default: false

Contributing

Due to the complex nature of this package, it is possible that some features may not be perfect. If you believe so and found a solution, feel free to open a pull request.

Inspiration

There are a lot of typers that do this, but almost none of them have support for Korean which I needed for my localized website. Nor were there a lot of typers that support typing multiple elements at once. Hence why I decided to make one that has it all!