@kelsier90/react-pulse-text

React Pulse Text

A lightweight, zero-dependency React hook that creates dynamic typing and erasing text animations for modern UI experiences.

✨ Demo & Documentation

Live Demo & Interactive Playground →

🚀 Quick Start

import React from "react";
import { usePulseText } from "@kelsier90/react-pulse-text";

function TypewriterHeading() {
  const { text } = usePulseText({
    text: "Hello, I'm a React developer!",
    duration: 2000,
    erase: true,
    iterationDelay: 1000,
  });

  return <h1>{text}</h1>;
}

📦 Installation

# npm
npm install @kelsier90/react-pulse-text

# yarn
yarn add @kelsier90/react-pulse-text

# pnpm
pnpm add @kelsier90/react-pulse-text

🔥 Features

• Progressive Text Animation: Build text character by character in forward or reverse order
• Erase Effect Support: Create typewriter-style animations with text that types and erases
• Highly Customizable: Configure animation duration, delay, iterations, and more
• Lifecycle Callbacks: Hook into animation events with onStart, onChange, and onEnd
• Animation Controls: Toggle animations on/off with the active prop
• TypeScript-Ready: Full type definitions for enhanced developer experience
• Zero External Dependencies: Only requires React as a peer dependency
• Tiny Footprint: Minimal impact on your bundle size
• Simple API: Intuitive interface for quick implementation

🛠️ API Reference

Basic Configuration

const { text } = usePulseText({
  text: "Your animated text", // The text to animate
  active: true, // Controls if animation runs (default: true)
  duration: 2000, // Animation duration in ms (default: 1000)
  delay: 0, // Initial delay before animation starts (default: 0)
  iterationCount: Infinity, // Number of times to repeat (default: 1)
  iterationDelay: 0, // Delay between iterations in ms (default: 0)
  erase: false, // Whether to erase text after showing (default: false)
  reverse: false, // Whether to animate from end to start (default: false)
});

Animation Lifecycle Callbacks

usePulseText({
  text: "Hello world!",
  onStart: () => console.log("Animation started"),
  onChange: ({ text, iteration }) => console.log("Current text:", text, "Current iteration:", iteration),
  onEnd: () => console.log("Animation completed"),
});

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request on the GitHub repository.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.