Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Kelsier90/React-Pulse-Text below:

Kelsier90/React-Pulse-Text: The usePulseText hook creates an animated text effect that makes string content progressively appear or disappear following a specified pattern.

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

Live Demo & Interactive Playground →

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>;
}

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

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

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

• 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

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)
});

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"),
});

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4