Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/camwiegert/typical
Animated typing in ~400 bytes 🐡 of JavaScript
https://github.com/camwiegert/typical
animation javascript module typing
Last synced: 6 days ago
JSON representation
Animated typing in ~400 bytes 🐡 of JavaScript
- Host: GitHub
- URL: https://github.com/camwiegert/typical
- Owner: camwiegert
- License: mit
- Created: 2019-09-27T21:38:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-09T20:50:59.000Z (over 1 year ago)
- Last Synced: 2024-11-20T20:25:09.909Z (22 days ago)
- Topics: animation, javascript, module, typing
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 1,566
- Watchers: 9
- Forks: 62
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-repos - camwiegert/typical - Animated typing in ~400 bytes 🐡 of JavaScript (JavaScript)
- awesome-luooooob - camwiegert/typical - Animated typing in ~400 bytes 🐡 of JavaScript (JavaScript)
README
# typical
> Animated typing in ~400 bytes :blowfish: of JavaScript.
- **Zero dependencies**
- **MIT licensed** [→](https://github.com/camwiegert/typical/tree/master/LICENSE)
- **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
[**Demo →**](https://codepen.io/camwiegert/pen/rNNepYo)
[](https://codepen.io/camwiegert/pen/rNNepYo "Demo on CodePen")
---
## Install
```shell
npm install @camwiegert/typical
```
More install options
Instead of using a package manager, you can download typical.js from GitHub and import it locally or import it directly from a CDN like unpkg.
## API
```typescript
type(target: HTMLElement, ...steps: any[]) => Promise;
```
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.
```javascript
import { type } from '@camwiegert/typical';
type(element, 'text');
```
### Pausing
In order to pause typing at any point, pass a number of milliseconds to pause.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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](https://github.com/catalinmiron/react-typical) - React component
- [vue-typical](https://github.com/Turkyden/vue-typical) - Vue component