@goodpie/html-typer NPM

HTML Typer

HTML Typer is a lightweight TypeScript package that brings your HTML content to life with a smooth typewriter effect. It auto-sanitizes input using DOMPurify, supports nested elements.

Features

Typewriter Animation: Gradually renders text for a captivating effect.
Auto-Sanitization: Uses DOMPurify to secure your content against XSS.
Nested HTML Support: Processes complex HTML structures.
TypeScript-Ready: Fully typed with generated declaration files.

Installation

Install HTML Typer and its dependencies (only TypeScript and DomPurify) using npm:

npm install @goodpie/html-typer

For React, install the following:

npm install @goodpie/html-typer-react

Usage

Vanilla JavaScript/TypeScript

import { animateHtmlRendering } from 'html-typer';

const container = document.getElementById('myContainer');
const htmlContent = `<p>Hello, <strong>World!</strong></p>`;

animateHtmlRendering(container, htmlContent, 50).then(() => {
  console.log('Animation complete!');
});