string-typer

A tiny, environment-agnostic, string typing simulator.

There are a bunch of these things, but they tend to be tied to the DOM or full of opinions. This is just a simple function that takes a string and a callback, and calls that callback for each character, at a random interval, until the string is reproduced. Sound complex? That’s just me being a poor writer. But check out the usage examples.

Install

$ npm install string-typer

Usage

Basic

On the command line

var type = require('string-typer/once')

type('naïve typing simulation is kewl', function (typed, done) {
  process.stdout.clearLine()
  process.stdout.cursorTo(0)
  process.stdout.write(typed)
  if (done) process.stdout.write('\n')
})

In the browser

var type = require('string-typer/once')
var field = document.querySelector('input[type=text]')

type('this is how you use a text field', function (typed) {
  field.setAttribute('placeholder', typed)
})

Stopping prematurely

Works in both environments.

var type = require('string-typer/once')
var field = document.querySelector('input[type=text]')

var stop = type('this is how you use a text field', function (typed) {
  field.setAttribute('placeholder', typed)
})

field.oninput = stop

Advanced

Set the range of possibly keystroke delays:

var type = require('string-typer/once')

var delay = { min: 350, max: 1000 }

type('type this really slow', delay, function (typed) {
  document.title = typed
})

Overwrite an initial string:

var type = require('string-typer/once')

var opts = {
  initial: 'type this somewhat fast',
  min: 350,
  max: 1000
}

type('type this really slow', opts, function (typed) {
  // Hard to document this in writing, but you
  // would see “somewhat fast” backspaced and
  // replaced with “really slow”

  document.body.textContent = typed
})

Looping

var type = require('string-typer/loop')

var text = [
  'type this really slow',
  'type this somewhat fast'
]

var opts = {
  initial: 'type this somewhat fast',
  min: 350,
  max: 1000
}

var stop = type(text, opts, function (typed, stopped) {
  document.body.textContent = typed

  if (stopped) {
    alert('aw man!')
  }
})

document.documentElement.onclick = stop

Page weight

| compression | size | | :--------------------- | ------: | | string-typer.js | 4.28 kB | | string-typer.min.js | 2.56 kB | | string-typer.min.js.gz | 1.05 kB |

License

MIT