Typewriter web component

a type-writer web component

npm i @eatsjobs/type-writer

import '@eatsjobs/type-writer'

or

<script type="module">
  import 'node_modules/@eatsjobs/type-writer';
</script>

or, straight from a CDN via jsDelivr, no install needed:

<script type="module" src="https://cdn.jsdelivr.net/npm/@eatsjobs/type-writer@1/type-writer.js"></script>

pin an exact version instead of the @1 major-version range if you want reproducible builds:

<script type="module" src="https://cdn.jsdelivr.net/npm/@eatsjobs/[email protected]/type-writer.js"></script>

  <type-writer
      style="
        --playground-background: #282a36;
        --text-color: #50fa7b;
        --font-family: Special Elite, cursive;
        --font-size: 2.5rem;
        --cursor-width: 1.5rem;
        --cursor-height: 0.5rem;
      "
      autostart
      linebreakdelay='1000'
      typingdelay='75'      
    >
      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.
  </type-writer>

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<string, string, unknown> | | pause | (): Promise<void> | | restart | (): Promise<void \| null> | | resume | (): void | | start | (): Promise<void \| null> | | stop | (): Promise<void> |

Events

| Event | Type | Description | |--------|--------------------|-----------------------------------------------| | done | CustomEvent<any> | Dispatched when type-writing naturally finish |

CSS Custom Properties

| Property | Description | |---------------------------|---------------------------------| | --cursor-color | the color of the cursor | | --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 |