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.