Typewriting-animation NPM

typewriting-animation

A customizable and lightweight typewriter animation JavaScript library that allows you to add your own custom characters, control the speed of the animation, control the delay between each character, and control the looping of the animation to decide the type of cursor to use.

🚀 Features

Customizable typewriter animation with the following features:

Add your own custom characters
Control the speed of the animation
Control the delay between each character
Control the looping of the animation
Decide the type of cursor to use

⚙️ Build using

TypeScript
npm
Gulp
Rollup

📦 Getting Started

NPM

Installation

npm i typewriting-animation

🔨 Usage

React

import React from 'react';
import { useTypewriterEffect } from 'typewriting-animation';

function App() {
  const {
    typedString,
    selectedString,
  } = useTypewriterEffect(
    [
      "add your own custom characters",
      "control the speed of the animation",
      "control the delay between each character",
      "control the looping of the animation",
      "decide the type of cursor to use",
    ],
    // Otpional for customizing the animation
    {
      speed: 30, // Set your desired animation speed in milliseconds
      delay: 2000, // Set the delay between sentences in milliseconds
      loop: false, // Set to true if you want the animation to loop
      cursor: '_', // Set your desired cursor character
    }
  );

  return (
    <div>
      <div className="blinking-cursor" aria-label={selectedString}>
        typewriting-animation allows you to {typedString}
      </div>
    </div>
  );
}

export default App;