https://github.com/eatsjobs/type-writer

a type writer web component
https://github.com/eatsjobs/type-writer

Last synced: 26 days ago
JSON representation

a type writer web component

• Host: GitHub
• URL: https://github.com/eatsjobs/type-writer
• Owner: eatsjobs
• License: mit
• Created: 2021-05-18T16:18:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-02T09:21:48.000Z (over 3 years ago)
• Last Synced: 2024-04-26T10:41:55.513Z (7 months ago)
• Language: JavaScript
• Size: 376 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Typewriter web component 

a type-writer web component

![type-writer](https://github.com/eatsjobs/type-writer/blob/main/type-writer.gif)

```bash 

npm i @eatsjobs/type-writer

```

```bash

import '@eatsjobs/type-writer'

```

or

```html

  import 'node_modules/@eatsjobs/type-writer';

```

```html

  

      Hello I'm @eatsjobs.

      This is a type-writer web component

      To style it you have some css variables:

        --text-color

      --playground-background

      --font-family

      --font-size

      --cursor-width

      --cursor-height

      You also have some attributes and properties to be able to interact with:

      - linebreakdelay

      - typingdelay

      - autostart

      And also some methods to stop, restart, pause and resume the typewriting.

  

```

# Documentation

## Attributes

| Attribute        | Type      | Description                          |

|------------------|-----------|--------------------------------------|

| `autostart`      | `Boolean` | start on mount                       |

| `linebreakdelay` | `Number`  | the delay between after linebreak \n |

| `typingdelay`    | `Number`  | the delay between each word in ms    |

## Properties

| Property         | Type      |

|------------------|-----------|

| `autoStart`      | `boolean` |

| `lineBreakDelay` | `number`  |

| `typingDelay`    | `number`  |

## Methods

| Method                  | Type                                     |

|-------------------------|------------------------------------------|

| `clean`                 | `(): void`                               |

| `createLetterGenerator` | `(): Generator` |

| `pause`                 | `(): Promise`                      |

| `restart`               | `(): Promise`              |

| `resume`                | `(): void`                               |

| `start`                 | `(): Promise`              |

| `stop`                  | `(): Promise`                      |

## Events

| Event  | Type               | Description                                   |

|--------|--------------------|-----------------------------------------------|

| `done` | `CustomEvent` | Dispatched when type-writing naturally finish |

## CSS Custom Properties

| Property                  | Description                     |

|---------------------------|---------------------------------|

| `--cursor-height`         | the height of the cursor;       |

| `--cursor-width`          | the width of the cursor         |

| `--font-family`           | font-family                     |

| `--font-size`             | font-size                       |

| `--playground-background` | the background of the container |

| `--text-color`            | the color of the text           |