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

``bash
npm install react-animate-numbers
`

Usage

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

`tsx
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 (

value={number}
maxLength={5}
options={{
fontSize: 40,
}}
/>

);
}

export default App;
`

Props

$3

The number to animate and display.

$3

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

$3

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:

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