https://github.com/koca/vue-use-typewriter
https://github.com/koca/vue-use-typewriter
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/koca/vue-use-typewriter
- Owner: koca
- License: mit
- Created: 2019-11-19T18:26:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-17T21:53:36.000Z (almost 5 years ago)
- Last Synced: 2025-03-06T14:53:00.056Z (over 1 year ago)
- Language: Vue
- Homepage: vue-use-typewriter.vercel.app
- Size: 496 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Typewriter Hook
Made for Vue 3.
## Installation
Install using [Yarn](https://yarnpkg.com):
```sh
yarn add vue-use-typewriter
```
or NPM:
```sh
npm install vue-use-typewriter --save
```
## Usage
### Basic
```html
{{ word }}
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
};
}
});
```
### 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](https://github.com/gielcobben/use-typewriter).
## License
**use-typewriter** is MIT licensed.