TypeItGpt

A simple library to type a message char by char, with a blinking cursor, that looks like the chatGPT answer.

Demo

Demo

Installation

NPM

npm install typeit-gpt --save

CDN

<link rel="stylesheet" href="https://unpkg.com/typeit-gpt/src/index.css" />
<div id="message-container""></div>

<script type="module">
    import TypeItGpt from 'https://cdn.skypack.dev/typeit-gpt';
    TypeItGpt.typeCursor('Hello World');
</script>

Usage

<!--with default options the library expects a div with id="message-container" to be present in the DOM    -->
<div id="message-container"></div>

import { TypeItGpt } from "typeit-gpt";

// simple usage
TypeCursor.typeCursor("Hello World");

// with options
TypeCursor.typeCursor("Hello World", options);

options

| Option | Type | Default | Description | | -------------------------- | -------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | messageContainer | HTMLElement | document.getElementById( 'message-container' ) as HTMLElement | the element that will contain the message | | shouldType | ( message: string ) => boolean | ( message: string ) => !message.includes( '<' ) | a callback that is called on every char typed, on false the message will be added directly on true the message will be typed char by char | | onType | (oldMessage: string, currentChar: string ) => void | undefined | a callback that is called after every char typed | | onEnd | () => void | undefined | a callback that is called when the message is typed | | waitLongerChar | Array | [ ',', '.', '?' ] | if the first char is currently typed, add a longer timeout | | timings.charInterval | number | 50 | the time between each char typed | | timings.waitLongerInterval | ( timeBefore: number ) => number | ( timeBefore: number ) => Math.random() _ 50 _ timeBefore | the time between each char typed | | timings.spaceInterval | ( timeBefore: number ) => number | ( timeBefore: number ) => Math.random() _ 5 _ timeBefore | the time between each char typed | | startEmpty | boolean | true | if the message should start empty, or append to the previous message | | cursorWidth | string | '1rem' | the width of the cursor | | cursorColor | string | 'white' | the color of the cursor | | removeClassAfterEnd | boolean | false | if the type-it-gpt class should be removed from the message after the typing is done |

methods

| Method | Description | | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | TypeCursor.typeCursor( message: string, userOptions: TypeOptions = defaultOptions, ) | types a message char by char | | typeCursor( message: string, startEmpty: boolean = true, onEnd: () => void = () => { } ) | types a message char by char | | setStopTyping() | call this function to write all the message at ones and stop the typing, this is useful if a new message needs to be typed |

Typescript

The project is developed using typescript, so weather you use typescript or javascript, you will get documentation and type checking.