js-type-text

2.0.6 • Public • Published

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

Dependencies (0)

    Dev Dependencies (0)

      Install

      npm i js-type-text

      DownloadsWeekly Downloads

      4

      Version

      2.0.6

      License

      ISC

      Unpacked Size

      5.08 kB

      Total Files

      4

      Last publish

      Collaborators

      • kravse