Vue Typewriter Hook

Made for Vue 3.

Installation

Install using Yarn:

yarn add vue-use-typewriter

or NPM:

npm install vue-use-typewriter --save

Usage

Basic

<template>
  <div id="app">
    <div>{{ word }}</div>
  </div>
</template>

<script>
import { useTypewriter } from 'vue-use-typewriter';

export default defineComponent({
  setup() {
    const options = {
      words: ['Hello', 'World', 'This is', 'a hook'],
      min: 10,
      max: 80,
      wordDelay: 2000,
      eraseDelay: 1000,
    };
    const { word } = useTypewriter(options);
    //state
    return {
      word
    };
  }
});
</script>

Advanced usage

checkout the example folder for reactive options and animations.

API

Options

| Name | Type | Default | Required | Description | | ---------- | -------- | ------- | -------- | ---------------------------------------------- | | words | string[] | [] | Yes | An array of words you want to be typed. | | min | number | 10 | No | Minimum amount in ms of delay between letters. | | max | number | 80 | No | Maximum amount in ms of delay between letters. | | wordDelay | number | 2000 | No | Delay in ms between words in the array. | | eraseDelay | number | 1000 | No | Delay in ms before earsing the word |

React version: react-use-typewriter.

License

use-typewriter is MIT licensed.