A lightweight, performant, and highly customizable animated counter component for React, perfect for displaying changing numbers with a smooth "slot machine" rolling effect.
2025-07-27_15-46-27.mp4
- Smooth Animations: Uses CSS transforms for high-performance animations.
- Highly Customizable: Control font size, padding, and styling via props.
- Easy to Style: Provides base structural CSS and allows for complete customization with your own class names (e.g., Tailwind CSS).
- Lightweight: No external dependencies.
- TypeScript Ready: Written in TypeScript with full type support.
npm install react-animated-rolling-counter
# or
yarn add react-animated-rolling-counterFirst, import the required base styles once in your main application file (e.g., App.tsx or index.css).
// In your App.tsx or similar entry file
import "react-animated-rolling-counter/styles.css";Then, use the component in your project:
import { useState } from "react";
import { AnimatedCounter } from "react-animated-rolling-counter";
import "react-animated-rolling-counter/styles.css";
const CounterDemo = () => {
const [count, setCount] = useState(10);
const increment = () => setCount((prev) => prev + 1);
const decrement = () => setCount((prev) => prev - 1);
return (
<div
style={{
display:
71D3
"flex",
flexDirection: "column",
alignItems: "center",
gap: "20px",
padding: "50px",
fontFamily: "sans-serif",
border: "1px solid #ddd",
borderRadius: "8px",
maxWidth: "400px",
margin: "50px auto",
}}
>
<h2 style={{ margin: 0 }}>Animated Counter Demo</h2>
<div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
<button
onClick={decrement}
style={{ padding: "10px 20px", fontSize: "24px", cursor: "pointer" }}
>
-
</button>
<AnimatedCounter value={count} fontSize="60px" padStart={2} />
<button
onClick={increment}
style={{ padding: "10px 20px", fontSize: "24px", cursor: "pointer" }}
>
+
</button>
</div>
</div>
);
};
export default CounterDemo;You can easily customize the counter using the containerClassName and digitClassName props.
<AnimatedCounter
value={score}
fontSize={80}
padding={4}
containerClassName="gap-2"
digitClassName="text-blue-500 bg-gray-800 rounded-lg"
/>| Prop | Type | Default | Description |
|---|---|---|---|
value |
number |
- | Required. The numeric value to display. |
fontSize |
number |
60 |
The font size in pixels. Also determines the height of the component. |
padding |
number |
2 |
The total number of digits, padding with leading zeros if needed. |
containerClassName |
string |
"" |
Custom class for the main container div. Useful for gap, etc. |
digitClassName |
string |
"" |
Custom class for each digit slot. Useful for color, bg, rounded. |