Skip to content

Latest commit

 

History

History
122 lines (100 loc) · 4.35 KB

README.md

File metadata and controls

122 lines (100 loc) · 4.35 KB

Vue Auto Writer

Just a simple and lightweight auto writer/typer component made with Vue.js.

version codecov js-standard-style Downloads Build

Demo

Edit Checkbox

Installation

npm

$ npm install vue-auto-writer --save

yarn (recommended)

$ yarn add vue-auto-writer

Quick start

Vue.js

You can import in your main.js file

import Vue from "vue";
import VueAutoWriter from "vue-auto-writer";

Vue.use(VueAutoWriter);

Or locally in any component

import VueAutoWriter from "vue-auto-writer";

export default {
  components: {
    VueAutoWriter,
  },
};

Basic usage

<template>
  <vue-auto-writer base-text="Hello World" />
</template>

You can use a custom css class to change the writer text style

<template>
  <vue-auto-writer class="my-writer" base-text="Hello World" />
</template>

<style>
  .my-writer {
    font-family: 'Fredoka One';
    font-size: 20px;
    font-weight: 600;
    word-spacing: 5px;
  }
</style>

With replaceable texts. You can also use custom style to each replacement

<template>
  <vue-auto-writer base-text="Hi! I'm" :texts="replaceableTexts" />
</template>

<script>
  export default {
    data: () => ({
      replaceableTexts: [
       {
        value: 'John Doe',
       },
       {
        value: 'Jane Doe',
        style: 'color: red; font-size: 25px; background-color: yellow;'
       },
      ]
    })
  }
</script>

Props

Property name Type Default Required Description
base-text String ✔️ 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)

ko-fi

License

MIT © Adolfok3