js-type-text

js-type-text

A framework agnostic typing animation package built with vanilla JavaScript. Works with Vue.js, React, and everything else.

This animation works with any font! However you will find that it looks its best when paired with Monospaced fonts as their letters have a fixed width.

Installation

npm install js-type-text

Usage

// import the package
import jsTypeText from 'js-type-text';

// start typing
jsTypeText.start(config, callback);

// stop typing and/or cursor.
jsTypeText.stop();

Configuration

jsTypeText.start({
  text: "Your Text Here",
  speed: 110,
  cursor: true,
  cursorSpeed: 350,
  cursorStyle: "vertical"
}, callback);

Value	Type	Required	Description	Default
text	String	Required	The string to be typed.	N/A
speed	Number	Optional	Time in ms per character typed.	110
cursor	Boolean	Optional	Show or hide cursor	TRUE
cursorSpeed	Number	Optional	Time in ms per cursor blink. Set to 0 to disable blink.	350
cursorStyle	String	Optional	"vertical" or "horizontal" or any html character you'd like. For example "▗".	"horizontal" (ie. the underscore symbol _ )

Note: Avoid jitter with custom HTML cursors by setting a CSS line-height value.

Examples

Vanilla JS

jsTypeText.start({
  text: "Welcome to my site"
}, function (result) {
  document.getElementById('myElement').innerHTML = result;
});

// optionally stop the typing and/or cursorpoint.
jsTypeText.stop();

Vue.js

data() {
  return: {
    myTitle: ''
  }
},
created: function () {
  jsTypeText.start({
    text: "Welcome to my site"
  }, (result) => {
    this.myTitle = result;
  })
},
beforeDestroy: function () {
  jsTypeText.stop();
}

React.js

class myPage extends React.Component{
  state = {
    myTitle:""
  }
  componentDidMount () {
    jsTypeText.start({
      text: "Welcome to my site"
    }, (result) => {
      this.setState({myTitle: result})
    }
  }
  componentWillUnmount () {
    jsTypeText.stop()
  }
  render(){
    return(<h1>{this.state.myTitle}</h1>)
  }
}

SIC © Jared Krause