Needlessly Postulating Minds

    tiper-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    npm version

    A small library for creating typing animations.

    View a short video demonstration here.

    Installation

    npm i tiper-js

    Usage

    Initialization is really simple. Just create a new instance of Tiper and pass in a DOM element. The options object is optional.

    //ES6
    import Tiper from "tiper-js";
     
    //ES5
    let Tiper = require('tiper-js');
     
    let tiper = new Tiper(document.querySelector('.tiper-js-container'));
     
    tiper.beginTyping(); //Begins typing with default text and config.
    tiper.line('Hello, neighbor!') // Types "Hello, neighbor!". Also uses default config.

    If you want to have the blinking cursor affect, link the css file in your html file like so:

    <link type="text/css" rel="stylesheet" href="./node_modules/tiper-js/lib/tiper-js.css">

    Checkout the test folder for a basic, viewable example.

    Options

    Tiper exposes a minimal, yet fun, set of options to play around with.

    • text: string (required) - The string of text to be typed.
    • hesitation: number - A number from 0 to 1. Used as a factor in determining the delay between typing the next character. Default is 0.45.
    • wordsPerMinute: number: - A number used to determine typing speed. Default is 40.
    • pauseTimeout: number: - The time in ms to pause on certain conditions. Only applies if pauseOnSpace or pauseOnEndOfSentence is true.
    • pauseOnSpace: boolean: - Whether or not to pause on spaces. Default is false.
    • pauseOnEndOfSentence: boolean: - Whether or not to pause at the end of sentences. Default is true.
    • showCaret: boolean: - Whether or not show caret. Default is false.
    • caretType: string: - The type of caret to show if showCaret is true. Available options are 'normal' or 'underscore'. Default is 'normal'.
    • glitch: boolean: - Whether or not to show glitch effect intermittently.
    • onFinishedTyping: Function: - The callback to fire after the text has been typed.

    Methods

    • typer.beginTyping(text: string, reset: boolean) - Begin typing at the current index. Returns a Promise that resolves when all the text has been typed.
    • typer.stopTyping() - Stop typing at the current index. Returns a Promise that resolves when async interval is cleared.
    • typer.line(text: string) - Output a single line of text. Returns a Promise that resolves when the particular text is finished being displayed.

    Install

    npm i tiper-js

    DownloadsWeekly Downloads

    26

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    40.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • devplex