@tomskopek/typical
v0.2.2
Published
Animated typing in ~400 bytes
Downloads
5
Readme
typical
A fork of camwiegert/typical
Animated typing in ~400 bytes :blowfish: of JavaScript.
- Zero dependencies
- MIT licensed →
- Emoji support
- Smart delete: only delete what needs deleting
- Pausing: pause between steps
- Looping: easily loop from any point
- Waiting: wait on arbitrary Promises
- Humanity: slightly varied typing speed
Install
npm install @tomskopek/typical
API
type(target: HTMLElement, ...steps: any[]) => Promise<void>;
type(target: { node: HTMLElement, textAccessor: 'textContent' | 'placeholder' }, ...steps: any[]) => Promise<void>;
The module exports a single function, type
, which takes a target element as its first argument, and any number of additional arguments as the steps to perform. Additional arguments perform actions based on their type:
| Type | Action |
|:-----------|:-------------------------|
| string
| Type text |
| number
| Pause (milliseconds) |
| function
| Call with target element |
| Promise
| Wait for resolution |
Usage
The most basic usage of type
is providing a target element and a string to type.
import { type } from '@tomskopek/typical';
type(element, 'text');
Pausing
In order to pause typing at any point, pass a number of milliseconds to pause.
type(element, 'Hello', 1000, 'Hello world!');
Looping
In order to loop, pass type
as a parameter to itself at the point at which you'd like to start looping. It can be helpful to alias type
as loop
to be explicit.
import {
type,
type as loop
};
const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];
type(element, ...steps, loop);
To loop a finite amount, pass your steps multiple times.
type(element, ...steps, ...steps, ...steps);
Waiting
When passed a Promise
, type
will wait for it to resolve before continuing. Because type
itself returns a Promise
, that means you can wait on a set of steps to complete before starting another.
const init = type(target, 'In a moment...', 500);
type(target, init, 'start', 500, 'looping', loop);
Functions
Function arguments are passed the target element, and can be useful for operating on the target element between steps. If you return a Promise
, type
will wait for it to resolve.
const toggle = (element) =>
element.classList.toggle('is-typing');
type(target, toggle, 'Type me', toggle);
Support
- [x] Chrome
- [x] Edge
- [x] Firefox
- [x] Safari
- [ ] Internet Explorer
Related
- react-typical - React component
- vue-typical - Vue component