Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayitinya/vue-typewriter-effect
A Vue Js wrapper for typewriter-effect
https://github.com/ayitinya/vue-typewriter-effect
npm-package vue vue3 vuecomponent
Last synced: about 1 month ago
JSON representation
A Vue Js wrapper for typewriter-effect
- Host: GitHub
- URL: https://github.com/ayitinya/vue-typewriter-effect
- Owner: ayitinya
- License: mit
- Created: 2023-01-02T03:15:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T10:53:28.000Z (about 1 year ago)
- Last Synced: 2024-09-30T10:23:33.688Z (about 2 months ago)
- Topics: npm-package, vue, vue3, vuecomponent
- Language: Vue
- Homepage: https://ayitinya.github.io/vue-typewriter-effect
- Size: 646 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Typewriter Effect
[](https://www.npmjs.com/package/vue-typewriter-effect)
[](https://www.npmjs.com/package/vue-typewriter-effect)
[](https://github.com/ayitinya/vue-typewriter-effect/blob/main/LICENSE)
## Introduction
Vue Typewriter Effect is a Vue.js wrapper for [Typewriter Effect](https://www.npmjs.com/package/typewriter-effect) package that has an average of over 10k weekly downloads.
The package is a simple and lightweight library that allows you to use typewriter effect in your Vue.js projects with ease.
## Getting Started
Install `vue-typewriter-effect` with npm:
```bash
npm install vue-typewriter-effect
```
with yarn:
```bash
yarn add vue-typewriter-effect
```
## Usage
Import the component and register it globally in your Vue instance:
```js
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app
.component("vue-typewriter-effect", VueTypewriterEffect)
.mount("#app");
```
or locally in your component:
```vue
import VueTypewriterEffect from "vue-typewriter-effect";
```
Use the component in your template:
```vue
```
## Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| element | `String` | `span` | The HTML element to use for the wrapper. |
| strings | `Array` | `["Hello", "World"]` |Strings to type out when using autoStart option |
| cursor | `String` | `pipe character` | String value to use as the cursor. |
| delay | `Number` | `natural` | `natural` | The delay between each key when typing. |
| deleteSpeed | `Number` | `natural` | `natural` | The delay between each key when deleting. |
| loop | `Boolean` | `false` | Whether to loop the strings. |
| autoStart | `Boolean` | `true` | Whether to start typing automatically. |
| pauseFor | `Number` | `1500` | The pause duration after a string is typed when using autostart mode. |
| devMode | `Boolean` | `false` | Whether or not to display console logs. |
| skipAddStyles | `Boolean` | `false` | Whether or not to skip adding styles to the document. |
| wrapperClassName | `String` | `Typewriter__wrapper` | The class name to use for the wrapper element. |
| cursorClassName | `String` | `Typewriter__cursor` | The class name to use for the cursor element. |
| stringSplitter | `Function` | `null` | A function that splits the string into an array of characters. [Example](https://codesandbox.io/s/typewriter-effect-emojis-pgz6e) |
| onCreateTextNode | `Function` | `null` | Callback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it. |
| onRemoveNode | `Function` | `null` | Callback function when a node is about to be removed. First param will be an object `{ node: HTMLNode, charater: string }` |
See the [Typewriter Effect](https://www.npmjs.com/package/typewriter-effect) package for more information.