react-animate-numbers

A lightweight React component for animating numbers with a cool scrolling effect. Perfect for counters, timers, or any numeric display that needs to come to life.

Documentation

See detailed documentation here

Features

• 🎨 Customizable styling: Control colors, font size, borders, and more!
• ⏱️ Smooth animations: Choose from multiple animation speeds and easing types.
• 📏 Flexible display: Set the maximum number of digits and auto-pad numbers with zeros.
• 🔢 Responsive: Easily adjust spacing and digit sizes to fit any design.

Installation

npm install react-animate-numbers

Usage

Here's a simple example of how to use react-animate-numbers in your project:

import React, { useEffect, useState } from "react";
import AnimatedNumbers from "react-animate-numbers";

function App() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setNumber((prevNumber) => prevNumber + 1);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <AnimatedNumbers
        value={number}
        maxLength={5}
        options={{
          fontSize: 40,
        }}
      />
    </div>
  );
}

export default App;

Props

value (number, required)

The number to animate and display.

maxLength (1-20, required)

Specifies the maximum number of digits to display. The number is padded with zeros if necessary.

options (optional)

An object that lets you customize the animation and appearance. The available options are:

| Option | Type | Default | Description | | ------------------- | -------------------------------------------------------------------------- | ----------------- | ------------------------------------------------ | | animationSpeed | "sm", "md", "lg" | "md" | Sets the animation speed (small, medium, large). | | animationType | "ease", "linear", "ease-in", "ease-out", "ease-in-out" | "ease-in-out" | Sets the easing function for the animation. | | backgroundColor | string | "" | The background color behind the digits. | | bold | boolean | true | Makes the digits bold if set to true. | | border | string | "" | Adds a border around each digit container. | | color | string | "" | The color of the digits. | | fontSize | number | 44 | The font size of the digits (in pixels). | | gap | number | 0 | The space between each digit. |

Example

To animate a number with a custom border, font size, and speed:

<AnimatedNumbers
  value={12345}
  maxLength={5}
  options={{
    animationSpeed: "lg",
    color: "blue",
    border: "2px solid green",
    fontSize: 80,
    backgroundColor: "#f0f0f0",
    bold: false,
  }}
/>