TypewriterJS

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

Typography
tameemsafi/typewriterjstypewriter-effect

README

TypewriterJS v2

CircleCI

undefined

NPM Repository
JSFiddle Example
Emoji Example

CDN


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

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

Installation

You can install Typewriterjs with just one command and you're good to go
  1. ```shell

  3. # with npm
  4. npm i typewriter-effect

  6. # with yarn
  7. yarn add typewriter-effect

  9. ```

Core


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

See examples in the 'examples' folder.

  1. ```js
  2. import Typewriter from 'typewriter-effect/dist/core';

  4. new Typewriter('#typewriter', {
  5.   strings: ['Hello', 'World'],
  6.   autoStart: true,
  7. });
  8. ```

Options


NameTypeDefaultDescription
------------
stringsStringnullStrings
cursorStringPipeString
delay'natural''natural'The
deleteSpeed'natural''natural'The
loopBooleanfalseWhether
autoStartBooleanfalseWhether
pauseForNumber1500The
devModeBooleanfalseWhether
skipAddStylesBooleanSkip
wrapperClassNameString'Typewriter__wrapper'Class
cursorClassNameString'Typewriter__cursor'Class
stringSplitterFunctionString
onCreateTextNodeFunctionnullCallback
onRemoveNodeFunctionnullCallback

Methods


All methods can be chained together.

NameParamsDescription
---------
start-Start
stop-Stop
pauseFor``ms``Pause
typeString``string``Type
pasteString``string``Paste
deleteAll``speed``Delete
deleteChars``amount``Delete
callFunction``cb``Call
changeDeleteSpeed``speed``The
changeDelay``delay``Change

Examples


Basic example


  1. ```js
  2. var app = document.getElementById('app');

  4. var typewriter = new Typewriter(app, {
  5.   loop: true,
  6.   delay: 75,
  7. });

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

Custom text node creator using callback


  1. ```js
  2. var app = document.getElementById('app');

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

  8. var typewriter = new Typewriter(app, {
  9.   loop: true,
  10.   delay: 75,
  11.   onCreateTextNode: customNodeCreator,
  12. });

  14. typewriter
  15.   .typeString('A simple yet powerful native javascript')
  16.   .pauseFor(300)
  17.   .start();
  18. ```

Custom handling text insert using input placeholder


  1. ```js
  2. var input = document.getElementById('input')

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

  8.   // Return null to skip internal adding of dom node
  9.   return null;
  10. }

  12. var onRemoveNode = function({ character }) {
  13.   if(input.placeholder) {
  14.     // Remove last character from input placeholder
  15.     input.placeholder = input.placeholder.slice(0, -1)
  16.   }
  17. }

  19. var typewriter = new Typewriter(null, {
  20.   loop: true,
  21.   delay: 75,
  22.   onCreateTextNode: customNodeCreator,
  23.   onRemoveNode: onRemoveNode,
  24. });

  26. typewriter
  27.   .typeString('A simple yet powerful native javascript')
  28.   .pauseFor(300)
  29.   .start();
  30. ```

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.

  1. ```jsx
  2. import Typewriter from 'typewriter-effect';

  4. <Typewriter
  5.   onInit={(typewriter) => {
  6.     typewriter.typeString('Hello World!')
  7.       .callFunction(() => {
  8.         console.log('String typed out!');
  9.       })
  10.       .pauseFor(2500)
  11.       .deleteAll()
  12.       .callFunction(() => {
  13.         console.log('All strings were deleted');
  14.       })
  15.       .start();
  16.   }}
  17. />
  18. ```

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

  1. ```jsx
  2. import Typewriter from 'typewriter-effect';

  4. <Typewriter
  5.   options={{
  6.     strings: ['Hello', 'World'],
  7.     autoStart: true,
  8.     loop: true,
  9.   }}
  10. />
  11. ```