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.

Readme

Keywords

none

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