https://github.com/adolfok3/vue-auto-writer
A simple and lightweight auto writer/typer component made with Vue.js.
https://github.com/adolfok3/vue-auto-writer
auto-typer auto-writer component typer vue vue-auto-typer vue-auto-writer vue-component vue-typer vue-writer vue2 vue3 vuejs vuejs2 vuejs3 writer
Last synced: 6 months ago
JSON representation
A simple and lightweight auto writer/typer component made with Vue.js.
- Host: GitHub
- URL: https://github.com/adolfok3/vue-auto-writer
- Owner: Adolfok3
- Created: 2022-09-23T15:14:21.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-09-27T17:23:45.000Z (about 3 years ago)
- Last Synced: 2025-03-21T06:18:52.267Z (7 months ago)
- Topics: auto-typer, auto-writer, component, typer, vue, vue-auto-typer, vue-auto-writer, vue-component, vue-typer, vue-writer, vue2, vue3, vuejs, vuejs2, vuejs3, writer
- Language: JavaScript
- Homepage:
- Size: 337 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue Auto Writer
Just a simple and lightweight auto writer/typer component made with Vue.js.
[](https://github.com/Adolfok3/vue-auto-writer)
[](https://codecov.io/github/Adolfok3/vue-auto-writer)
[](http://standardjs.com/)
[](https://github.com/Adolfok3/vue-auto-writer)
[](https://github.com/Adolfok3/vue-auto-writer)
## Demo
[](https://codesandbox.io/s/vue-auto-writer-ygci59)
## Installation
### npm
```bash
$ npm install vue-auto-writer --save
```
### yarn (recommended)
```bash
$ yarn add vue-auto-writer
```
## Quick start
### Vue.js
You can import in your `main.js` file
```js
import Vue from "vue";
import VueAutoWriter from "vue-auto-writer";
Vue.use(VueAutoWriter);
```
Or locally in any component
```js
import VueAutoWriter from "vue-auto-writer";
export default {
components: {
VueAutoWriter,
},
};
```
## Basic usage
```html
```
You can use a custom css class to change the writer text style
```html
.my-writer {
font-family: 'Fredoka One';
font-size: 20px;
font-weight: 600;
word-spacing: 5px;
}
```
With replaceable texts. You can also use custom style to each replacement
```html
export default {
data: () => ({
replaceableTexts: [
{
value: 'John Doe',
},
{
value: 'Jane Doe',
style: 'color: red; font-size: 25px; background-color: yellow;'
},
]
})
}
```
## Props
| Property name | Type | Default | Required | Description |
| -------------------- | ------- | ------- | ---------------- | ------------------------------------------------------------------------ |
| base-text | String | |:heavy_check_mark:| String that contains the base text to be displayed |
| texts | Array | [] | | Array of objects that contains the text and style which will be replaced |
| delay-on-writer | Number | 100 | | Set the writing speed in milliseconds |
| delay-on-start | Number | 1500 | | Set the delay before start write in milliseconds |
| delay-between-texts | Number | 1500 | | Set the delay before write next text in milliseconds |
| cursor-size | Number | 30 | | Set the cursor size in |
| cursor-color | String | #000000 | | Set the cursor color |
| cursor-blink-speed | Number | 2 | | Set the cursor blink speed |
| disable-cursor-blink | Boolean | false | | Disable the cursor blink |
| infinite | Boolean | false | | Restarts writer after finish write the base text (won't work if the texts prop has passed) |
[](https://ko-fi.com/adolfok3)
## License
MIT © [Adolfok3](https://github.com/Adolfok3/vue-auto-writer/blob/master/LICENSE)