0.1.2 • Published 3 years ago

vue-use-typewriter v0.1.2

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

Vue Typewriter Hook

npm.io

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

NameTypeDefaultRequiredDescription
wordsstring[][]YesAn array of words you want to be typed.
minnumber10NoMinimum amount in ms of delay between letters.
maxnumber80NoMaximum amount in ms of delay between letters.
wordDelaynumber2000NoDelay in ms between words in the array.
eraseDelaynumber1000NoDelay in ms before earsing the word

React version: react-use-typewriter.

License

use-typewriter is MIT licensed.