VueTinyTyper - a vue component for creating a typing effect element.

Credits

This project is forked from https://github.com/lourenc/tinytyper . Some parts of the readme are also originally from above repository.

Why

This project was created because I was missing events in the non-vue version.

Demo

Full credits to https://github.com/lourenc/tinytyper

Installation

Library can be easily installed via either Yarn or NPM:

npm i vue-tinytyper --save

or

yarn add vue-tinytyper

Usage

Basic setup looks like this:

import VueTinytyper from 'vue-tinytyper';

then

<vue-tinytyper text="Hello, please type this out."></vue-tinytyper>

or

<vue-tinytyper>Hello, please type this out.</vue-tinytyper>

Available props:

Prop	Default	Type	Description
text	""	String	The text to animate
textSpeed	95	Number	Defines text speed animation
cursor	▌	String	Defines current cursor symbol
blinkSpeed	0.05	Number	Defines blink speed of the cursor
containerClass	tiny-typer-container	String	A CSS class for the container element
cursorClass	tiny-typer-cursor	String	A CSS class for cursor element
textClass	tiny-typer-text	String	A CSS class for text element
staticCursor	false	Boolean	Makes cursor static (disables blinking)
staticText	false	Boolean	Makes text static (disables animation)
customEvents	{}	Object	Pass custom "on-character" events. Example: { '!': 'my-event' }, where the event 'my-event' will be triggered every time the current animation character matches the object key, eg. "!".

Available events

Eventname	Trigger	Payload
animation-finished	When animation doesn't have any more characters to animate	None

Known Issues, TODOs and Wishlist

• Whitespaces are not preserved in the text string.
• \n is typed out instead of creating a new line.
• Add support for pausing and resuming animation.
• Add support for triggering events on a combination of characters or words.

Contributions

Contributions are welcome. Feel free to create issues

License

MIT