Typer writer

A simple js/ts library to simulate typing effect on a text.

Installation

npm i typer-writer

Usage

import TypeWriter from 'typer-writer';

const prefix = document.createElement('span');
prefix.className = 'text-green-400 mr-2';
prefix.textContent = 'user@computer:~$';
const onProgress = () => {
  document.querySelector<HTMLDivElement>('#terminal')!.classList.remove('terminal-idle');
  setTimeout(() => {
    document.querySelector<HTMLDivElement>('#terminal')!.scrollTo({top: document.querySelector<HTMLDivElement>('#terminal')!.scrollHeight, behavior: 'smooth'});
    document.querySelector<HTMLDivElement>('#terminal')!.classList.add('terminal-idle');
  }, 300);
};

const tw = new TypeWriter(document.querySelector<HTMLDivElement>('#terminal')!);
// or tw.setElement(document.querySelector<HTMLDivElement>('#terminal')!);
tw.setOnProgress(onProgress);
tw.start([
  {waitBeforeStart: 1500, prefix, text: 'curl -X POST "https://api.example.com/employees" \\', speed: 100, onFinish: () => console.log('onFinishExact'), chunkSize: 5},
  {text: '-H "Content-Type: application/json \\', speed: 100, chunkSize: 5},
  {text: '-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \\', speed: 100, chunkSize: 5},
  {text: '-d \'{ "firstName": "John", "lastName": "Doe", "email": "[email protected]", "position": "Software Engineer", "dateOfBirth": "1990-01-01" }\'', speed: 100, chunkSize: 5},
  {text: '', delay: 2500},
  {text: '{ "status": "success", "data": { "id": "1234567890" }', immediate: true, speed: 100, chunkSize: 5},
  {waitBeforeStart: 1500, prefix, text: 'curl -X GET "https://api.example.com/employees/1234567890" \\', speed: 100},
  {text: '-H "Authorization: Bearer YOUR_ACCESS_TOKEN"', speed: 100, chunkSize: 5},
  {text: '', delay: 2500},
  {text: JSON.stringify({
      "status": "success",
      "data": {
        "id": "1234567890",
        "firstName": "John",
        "lastName": "Doe",
        "email": "[email protected]",
        "position": "Software Engineer",
        "dateOfBirth": "1990-01-01",
        "createdAt": "2023-10-12T10:00:00Z",
      },
    }, null, 2), immediate: true},
  {waitBeforeStart: 2700, prefix, text: 'clear', speed: 500, delay: 2000, onFinish: () => {
    tw.restart();
    }},
]);

API

TODO