Vue-tinytyper NPM

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

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

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

Library can be easily installed via either Yarn or NPM:

npm i vue-tinytyper --save

yarn add vue-tinytyper

Basic setup looks like this:

import VueTinytyper from 'vue-tinytyper';

then

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

<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

Contributions are welcome. Feel free to create issues

MIT

6 years ago