# @anag0/typewriter

> TypeWriter effect in javascript

Latest version **1.0.2** (published 2023-05-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @anag0/typewriter
pnpm add @anag0/typewriter
yarn add @anag0/typewriter
bun add @anag0/typewriter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-05-22 |
| First published | 2023-05-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Ernest Marcinko |
| Maintainers | anag0 |
| Keywords | typewriter effect, typewriter, effect, matrix, effect, native typewriter, javascript typewriter, es6, es6 typewriter, native |

## Links

- npm: https://www.npmjs.com/package/@anag0/typewriter
- Repository: https://github.com/anag0/typewriter
- Homepage: https://github.com/anag0/typewriter#readme
- Issues: https://github.com/anag0/typewriter/issues
- npm.io page: https://npm.io/package/@anag0/typewriter

## Recent versions

- 1.0.2 (latest) — 2023-05-22
- 1.0.1 — 2023-05-21
- 1.0.0 — 2023-05-20

## README

# TypeWriter javascript effect

A super simple and very small TypeWriter javascript library, only about ~2KB
[Live example](https://ernestmarcinko.com/typewriter/)

## Installation
Use npm or yarn to install TypeWriter with a single command

```shell
# with npm
npm i @anag0/typewriter

# with yarn
yarn add @anag0/typewriter

```
## Via CDN

If you prefer a build, use the CDN version

```html
<script src="https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.js"></script>
```

## Usage
```javascript
// Choose a node
const element = document.querySelectorAll('p')[0];

// Do the thing
const typeWriter = new TypeWriter(element, {
    keepBlinking: false
});
typeWriter.wait(2000)
        .write('Hi!')
        .delete(3)
        .write('This is a typewriter script!')
        .wait(2000)
        .config({pauseMin: 50, pauseMax:60})
        .wipe()
        .write('You can change the speed.');
```  

## Options

| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| cursor | String | '\|' (Pipe) | The blinking cursor |
| pauseMin | Integer | 170 | Mininum wait time before the next character |
| pauseMax | Integer | 230 | Maximum wait time before the next character |
| keepBlinking | Bool | true | Should the cursor remain after the text is printed |
| autoStart | Bool | true | Should the tasks start right away. If false then use the ``start()`` method to start the tasks |
| className | String | typewriter | The class name to be used for the element |
| injectStyles | Bool | true | Should the typewriter CSS be injected to the header |

## Methods

| Method | Params | Description |
| --- | --- | --- |
| write | ``String`` Text to write | Writes a text to the node innerHTML property |
| delete | ``Int`` Number of Characters to delete | Deletes number of characters a from the node innerHTML property |
| wait | ``Int`` Milliseconds to wait | Waits for N milliseconds before continuing with the next task |
| wipe | - | Deletes everything from the target node innerHTML property |
| config | ``Object`` Configuration key => value pairs | Changes the configuration |

## Callback functions
These are added via the arguments (options).

```javascript
const typeWriter = new TypeWriter(node, {
    onFinish: (node, params)=>{
        console.log(node, params);
    },
    onStart: (node, params)=>{
        console.log(node, params);
    },
    onTask: (task, node, params)=>{
        console.log(task, node, params);
    },
});
``` 

| Name | Arguments | Description |
| --- | --- | --- |
| onStart | ``Element`` The Node, ``Object`` Options | Executes when the ``start()`` function is triggered |
| onFinish | ``Element`` The Node, ``Object`` Options | Executes when no more tasks left in the queue |
| onTask | ``Object`` Task, ``Element`` The Node, ``Object`` Options | Executes when a task is about to be executed from the queue |

## Examples

### Basic Usage

Appends a text to the first paragraph node found

```javascript
const typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);
typeWriter.write('This is a typewriter script!')
```  

Deletes the node contents after waiting 2 seconds, then types in the new text:

```javascript
const typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);
typeWriter.wait(2000).wipe().write('This is a typewriter script!')
```  

### Advanced Usage

Deletes the node contents after waiting 2 seconds, then types in the new text, deletes 7 characters, then changes the typing speed, then writes a new text.

```javascript
const typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {
    pauseMin: 100,
    pauseMax: 150,
    keepBlinking: false
});
typeWriter.wait(2000)
    .wipe()
    .write('This is a typewriter script!')
    .wait(2000).
    .delete(7)
    .config({pauseMin: 50, pauseMax:100})
    .write('example!');
```  

### Custom class name & styles injection

By default the styles are injected to the document header. You can skip that, and add the styles manually from the ``typewriter.css`` file, or:

```html
<link rel="stylesheet" href="https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.css">
```

In that case the ``injectStyles`` option has to be ``false``:

```javascript
const typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {
    injectStyles: false
});
```  

You can also specify a custom wrapper class name:

```javascript
const typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {
    className: "myCustomTypewriter"
});
```  

If injectStyles is enabled, the className is automatically changed within the injected styles.

### Chaining multiple TypeWriters via callbacks

Using the ``onFinish`` and ``autoStart`` options you can chain the typewriter scripts together, so the next one is always started after the previous one finishes.

```javascript
const node1 = document.querySelector('#node1');
const node2 = document.querySelector('#node2');
const node3 = document.querySelector('#node3');

const typeWriter1 = new TypeWriter(node1, {
    autoStart: false,
    keepBlinking: false,
    onFinish: (node, params)=>{
        typeWriter2.start()
    },
});
const typeWriter2 = new TypeWriter(node2, {
    autoStart: false,
    keepBlinking: false,
    onFinish: ()=>{
        typeWriter3.start()
    }
});
const typeWriter3 = new TypeWriter(node3, {
    autoStart: false,
    keepBlinking: false
});

typeWriter1.write('This is the first typewriter writing..').start();
typeWriter2.write('..this is the second one..');
typeWriter3.write('..and this is the third.');
```

---
_Source: https://npm.io/package/@anag0/typewriter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._