Js-type-text NPM

js-type-text

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

screen recording of js-type-text typing its own url, npmjs.com/js-type-text

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