Examples

Here, you'll find some examples to help you understand how to use react-animate-numbers.

Basic Example

Let’s start with the basics! This example demonstrates how to animate a number and update it at a regular interval.

tsx

import React, { useState, useEffect } from "react";
import AnimatedNumbers from "react-animate-numbers";
 
function App() {
  const [number, setNumber] = useState(123);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setNumber((prev) => prev + 1);
    }, 2000);
 
    return () => clearInterval(interval);
  }, []);
 
  return (
    <div>
      <AnimatedNumbers value={number} maxLength={5} />
    </div>
  );
}
 
export default App;

Result:

Custom Styles

Now let’s add some flair! You can customize the colors, font size, and even add a border to each digit.

tsx

import React, { useState, useEffect } from "react";
import AnimatedNumbers from "react-animate-numbers";
 
function CustomStylesExample() {
  const [value, setValue] = useState(9876);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setValue((prev) => prev + 5);
    }, 3000);
 
    return () => clearInterval(interval);
  }, []);
 
  return (
    <AnimatedNumbers
      value={value}
      maxLength={6}
      options={{
        color: "#4A90E2",
        fontSize: 60,
        border: "2px solid #D1D5DB",
        backgroundColor: "#F9FAFB",
        bold: true,
        animationSpeed: "sm",
        gap: 5,
      }}
    />
  );
}
 
export default CustomStylesExample;

Result:

Animation Between Random Numbers

Watch your numbers shuffle smoothly between random values! Click the button to generate a fresh five-digit random number

tsx

import React, { useState } from "react";
import AnimatedNumbers from "react-animate-numbers";
 
function BetweenRandomNumbers() {
	const [number, setNumber] = useState(23456);
 
	const generateRandomNumber = () => {
		const randomNum = Math.floor(10000 + Math.random() * 90000);
		setNumber(randomNum);
	};
 
	return (
		<div>
			<h1>Result:</h1>
			<AnimatedNumbers
				value={number}
				maxLength={5}
				options={{
					color: "#4A90E2",
					fontSize: 60,
					bold: true,
					animationSpeed: "md",
				}}
			/>
			<button
				style={{
					marginTop: "10px",
					padding: "5px 10px",
					border: "none",
					borderRadius: "5px",
					backgroundColor: "#4A90E2",
					color: "#fff",
				}}
				onClick={generateRandomNumber}
			>
				Update Number
			</button>
		</div>
	);
}
 
export default BetweenRandomNumbers;

Result:

Continuous Random Animation

This example continuously animates random five-digit numbers at regular intervals of 1000 milliseconds. Perfect for live updates or real-time metrics, the digits smoothly transition from one random number to the next, creating a dynamic display without any user interaction.

tsx

import React, { useState, useEffect } from "react";
import AnimatedNumbers from "react-animate-numbers";
 
function ContinuousRandomAnimation() {
	const [number, setNumber] = useState(23456);
 
	useEffect(() => {
		const interval = setInterval(() => {
			const randomNum = Math.floor(10000 + Math.random() * 90000);
			setNumber(randomNum);
		}, 1000);
 
		return () => clearInterval(interval);
	}, []);
 
	return (
		<div>
			<h1>Result:</h1>
			<AnimatedNumbers
				value={number}
				maxLength={5}
				options={{
					color: "#4A90E2",
					fontSize: 60,
					bold: true,
					animationSpeed: "md",
				}}
			/>
		</div>
	);
}
 
export default ContinuousRandomAnimation;

Result:

Examples