TypeFX.js

A modern typewriter effect library in plain JavaScript: type, erase, select – almost anything you’d do on a keyboard.


Installation

$3

``html

`




$3

`shell
npm install typefxjs
`
`js
// ESM
import TypeFX from "typefxjs";

// CommonJS
const TypeFX = require('typefxjs')
`




Usage

`html



`
`js
const element = document.querySelector('#content')

new TypeFX(element)
.type("Type something with typefx.js!").wait(300)
.move(-10).wait(400)
.select(10).wait(500)
.delete()
`
Or define with options:
`js
new TypeFX(element, {...})
...
`
See API and Options

Vue3 Usage

`html



`




React Usage

`jsx
import { useEffect, useRef } from 'react'
import TypeFX from 'typefxjs'

export default function Demo() {
const ref = useRef(null)

useEffect(() => {
if (!ref.current) return
new TypeFX(ref.current)
.type('Type something with typefx.js!')
}, [])

return


}
`




Chainable

All TypeFX.js APIs are chainable and non-blocking, while each action in the chain is executed in sequence.

`js
const typeInstence = new TypeFX(document.querySelector('#content'), {
speed: 100,
})
`

This:

`js
typeInstence
.type("Type something, ").wait(300)
.type("then type something else").wait(100)
`

Equal to:

`js
typeInstence.type("Type something, ").wait(300)
typeInstence.type("then type something else").wait(100)
`

Options

The TypeFX constructor accepts an options object to control typing speed, randomness, and caret style.

`ts
new TypeFX(element, options?)
`

For example:
`js
new TypeFX(element, {
speed: 100,
speedRange: 0,
caretWidth: "1ch",
entryAnimation: {
keyframes: [{ opacity: 0 }, { opacity: 1 }],
options: { duration: 300 }
},
deleteAnimation: {
keyframes: [{ opacity: 1 }, { opacity: 0 }],
options: { duration: 300 }
}
})
`


| Param | | Description |
| ------------------- | ------------------------------------- | ------------------------------------------------------------------------- |
| speed | number (default 50) | Base typing pause in milliseconds per character. |
| speedRange | number (default 50) | Random speed range to simulate natural typing, set to 0 for linear typing |
| caretWidth | string (default "0.05em") | Width of the caret, should be a valid CSS length. |
| caretColor | string (default "currentColor") | Color of the caret, should be a valid CSS color. |
| entryAnimation | object | Custom entry animation using Web Animations API. |
| deleteAnimation | object | Custom delete animation using Web Animations API. |

API


| Name | Params | Description |
| ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| .type | text: string String to type | Types characters one by one. |
| .quickType | text: string String to type | Instantly types characters. |
| .wait | ms: number Time in milliseconds | Wait for a given duration. |
| .delete | n?: number Number of characters (default 0) | Deletes n characters (and selected characters). |
| .quickDelete | n?: number Number of characters (default 0) | Instantly deletes n characters (and selected characters). |
| .move | n: number Number of characters to move (positive = right, negative = left) | Moves the caret by n characters. |
| .quickMove | n: number Number of characters to move (positive = right, negative = left) | Instantly moves the caret by n characters. |
| .select | n: number Number of characters to select (positive = forward, negative = backward) | Selects n characters by caret. |
| .quickSelect | n: number Number of characters to select (positive = forward, negative = backward) | Instantly selects n characters by caret. |
| .clear | - | Clears all text. |
| .quickClear | - | Quick clears all text. |
| .cancel | - | Cancels all current queued actions. |
| .then | - | Runs custom function. |
| .speed | ms: number Time in milliseconds | Set typing speed. |
| .speedRange | ms: number` Time in milliseconds | Set typing speed range. |
| .hideCaret | - | Hides caret. |
| .showCaret | - | Shows caret. |