lightweight-typewriter v2.0.8

Lightweight custom typewriter

Demo is available here

Usage

Add it to your html:

<script src="https://unpkg.com/lightweight-typewriter@2.0.8/build/typewriter.min.js"></script>

or install as a dependency:

npm i lightweight-typewriter
yarn add lightweight-typewriter

Import:

const TypeWriter = require('lightweight-typewriter');
import TypeWriter from 'lightweight-typewriter';

Create an element with the desired class name and create a class instance:

<h1 class="myCoolTypeWriter"></h1>

<script>
  new TypeWriter('myCoolTypeWriter', {
    text: ['I am typable', 'Me too']
  }).start();
  // Don't forget to chain start()
</script>

Done! Refresh the page and see the result :)

Customize

If you would pass text to the element, it will be displayed in front of the typewriter and margin-left: 6px will be applied:

<p class="type-write">Front Text</p>

<script>
  new TypeWriter('type-write').start();
</script>

<!-- Above results in: -->
<p class="type-write">
  Front Text<span style="margin-left: 6px">Typing text</span>
</p>

<!-- To control margin-left use indent property -->
<script>
  new TypeWriter('type-write', {
    indent: '0px'
  }).start();
</script>

You can dynamically change all the properties with applyChanges() method:

const typeWriter = new TypeWriter('myCoolTypeWriter', {
  text: ['outside', 'inside'],
  speed: 500,
  pause: 1000,
  indent: '2px',
  cursorStyle: {
    width: '3px',
    color: 'dodgerblue'
  }
}).start();

// change speed and cursor after 1 second
setTimeout(() => {
  typeWriter.applyChanges({
    speed: 1500,
    cursorStyle: {
      color: 'red'
    }
    // ... other props
  })
}, 1000);

There are also available start() and stop() methods:

// create an instance
const typeWriter = new TypeWriter('elemClass', {
  text: ['sometext']
});

// start typing when it's needed
setTimeout(() => {
  typeWriter.start()
}, 1000);

// completely pause typing; can be resumed with start()
typeWriter.stop()

// stop typing and continue after 2 seconds
typeWriter.stop(2000)

Options

elementClass is the class name of target element \ text is an array of typing strings\ speed specifies the time needed to write a word\ pause specifies the delay before the word starts deleting\ cursorStyle is an optional object for styling typing cursor