te
@0kzh/typewriter-effect
npm i @0kzh/typewriter-effect
te

@0kzh/typewriter-effect

A simple yet powerful native javascript plugin for a cool typewriter effect.

by Tameem Safi

2.17.7 (see all)License:MITTypeScript:Not Found
npm i @0kzh/typewriter-effect
Readme

TypewriterJS v2

CircleCI

NPM Repository JSFiddle Example Emoji Example

CDN

You can use the CDN version of this plugin for fast and easy setup.

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

Core

This include the core typewriter library, which can be used directly through the API.

See examples in the 'examples' folder.

import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#typewriter', {
  strings: ['Hello', 'World'],
  autoStart: true,
});

Options

NameTypeDefault valueDescription
stringsString or ArraynullStrings to type out when using autoStart option
cursorStringPipe characterString value to use as the cursor.
delay'natural' or Number'natural'The delay between each key when typing.
deleteSpeed'natural' or Number'natural'The delay between deleting each character.
loopBooleanfalseWhether to keep looping or not.
autoStartBooleanfalseWhether to autostart typing strings or not. You are required to provide strings option.
pauseForNumber1500The pause duration after a string is typed when using autostart mode
devModeBooleanfalseWhether or not to display console logs.
skipAddStylesBooleanSkip adding default typewriter css styles.
wrapperClassNameString'Typewriter__wrapper'Class name for the wrapper element.
cursorClassNameString'Typewriter__cursor'Class name for the cursor element.
stringSplitterFunctionString splitter function, can be used to split emoji's
onCreateTextNodeFunctionnullCallback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it.
onRemoveNodeFunctionnullCallback function when a node is about to be removed. First param will be an object { node: HTMLNode, charater: string }

Methods

All methods can be chained together.

NameParamsDescription
start-Start the typewriter effect.
stop-Stop the typewriter effect.
pauseForms Time to pause for in millisecondsPause for milliseconds
typeStringstring String to type out, it can contain HTML tagsType out a string using the typewriter effect.
pasteStringstring String to paste out, it can contain HTML tagsPaste out a string.
deleteAllspeed Speed to delete all visibles nodes, can be number or 'natural'Delete everything that is visible inside of the typewriter wrapper element.
deleteCharsamount Number of charactersDelete and amount of characters, starting at the end of the visible string.
callFunctioncb Callback, thisArg this Object to bind to the callback functionCall a callback function. The first parameter to the callback elements which contains all DOM nodes used in the typewriter effect.
changeDeleteSpeedspeed Number or 'natural'The speed at which to delete the characters, lower number is faster.
changeDelaydelay Number or 'natural'Change the delay when typing out each character

Examples

Basic example

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
});

typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
  .pauseFor(1000)
  .start();

Custom text node creator using callback

var app = document.getElementById('app');

var customNodeCreator = function(character) {
  return document.createTextNode(character);
}

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

Custom handling text insert using input placeholder

var input = document.getElementById('input')

var customNodeCreator = function(character) {
  // Add character to input placeholder
  input.placeholder = input.placeholder + character;

  // Return null to skip internal adding of dom node
  return null;
}

var onRemoveNode = function({ character }) {
  if(input.placeholder) {
    // Remove last character from input placeholder
    input.placeholder = input.placeholder.slice(0, -1)
  }
}

var typewriter = new Typewriter(null, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
  onRemoveNode: onRemoveNode,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

React

This includes a React component which can be used within your project. You can pass in a onInit function which will be called with the instance of the typewriter so you can use the typewriter core API.

import Typewriter from 'typewriter-effect';

<Typewriter
  onInit={(typewriter) => {
    typewriter.typeString('Hello World!')
      .callFunction(() => {
        console.log('String typed out!');
      })
      .pauseFor(2500)
      .deleteAll()
      .callFunction(() => {
        console.log('All strings were deleted');
      })
      .start();
  }}
/>

Alternatively you can also pass in options to use auto play and looping for example:

import Typewriter from 'typewriter-effect';

<Typewriter
  options={{
    strings: ['Hello', 'World'],
    autoStart: true,
    loop: true,
  }}
/>
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate