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