vue-simple-typewriter v0.0.6

Vue Simple Typewriter

Original react component

A simple vue component for adding a nice typewriter effect to your project

Install

npm

npm install react-simple-typewriter

yarn

yarn add react-simple-typewriter

Usage

const data = ref<string[]>(["Eat", "Sleep", "Code"]);

<Typewriter
  :words="data"
  :loop="0"
  :delay-speed="1500"
  :delete-speed="80"
  :type-speed="80"
  :cursor="true"
  :cursor-blinking="true"
  :cursor-style="'|'"
  :cursor-color="'#000000'"
  :on-loop-done="onLoopDone"
  :on-delay="onDelay"
  :on-delete="onDelete"
  :on-type="onType"
  class="text"
/>

Troubleshooting

If you cursor is not blinking, or always shown try to add this css to you project

.blinkingCursor {
  position: relative;
  font: inherit;
  line-height: inherit;
  left: 3px;
  top: 0;
}

.blinking {
  animation-name: blink;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

Component Props

Usage Example

<script setup lang="ts">
import { ref } from "vue";

import { Typewriter } from "vue-simple-typewriter";
import 'vue-simple-typewriter/dist/style.css';

const data = ref<string[]>(["Eat", "Sleep", "Code"]);

const onLoopDone = () => {
  console.log("loop done");
};
const onDelay = () => {
  console.log("on Delay");
};
const onDelete = () => {
  console.log("on Delete");
};
const onType = () => {
  console.log("on Type");
};
</script>

<template>
  <div>
    <span class="about">Life is </span>
    <Typewriter
      :words="data"
      :loop="0"
      :delay-speed="1500"
      :delete-speed="80"
      :type-speed="80"
      :cursor="true"
      :cursor-blinking="true"
      :cursor-style="'|'"
      :cursor-color="'#000000'"
      :on-loop-done="onLoopDone"
      :on-delay="onDelay"
      :on-delete="onDelete"
      :on-type="onType"
      class="text"
    />
  </div>
</template>

<style scoped>
.text {
  font-size: 48px;
  color: red;
}

.about {
  font-size: 54px;
  color: black;
}
</style>

Contributing

This project is developing by enthusiasm, and our coding addiction. This is Open source project, and we will be fine to receive your help. You can take any task you want, just make fork on GitHub. There is a list of issues, todos, call it like you want:

License

MIT © danluki