vue-use-typewriter
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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.

/vue-use-typewriter/

    Package Sidebar

    Install

    npm i vue-use-typewriter

    Weekly Downloads

    0

    Version

    0.1.2

    License

    none

    Unpacked Size

    9.27 kB

    Total Files

    6

    Last publish

    Collaborators

    • koca