react-spinning-number 🎉

Welcome to react-spinning-number! If you're tired of boring static numbers in your react app, then get ready to spin things up—literally! This package adds some serious ✨ pizzazz ✨ to your numbers with smooth, eye-catching animations.

Features

• 🧩 Universal Format Support: Handles strings in any format — whether it's time, date, prices, or anything else.
• 🪶 Less than 5kb: It's so lightweight, it might just disappear! (But it won't, we promise.)
• 🛡️ Zero Dependencies: No baggage, no problems. Just pure spinning goodness.
• 🦴 Headless: You bring the style, react-spinning-number brings the spin.
• 🎨 Cool Animation: Transform your digits into mesmerizing spinners.

Usage

To get started, just install react-spinning-number via your favorite package manager:

npm install react-spinning-number
yarn add react-spinning-number
pnpm add react-spinning-number
bun add react-spinning-number

Want to see those numbers spin?

import React, { useState } from "react";
import SpinningNumber from "react-spinning-number";

export default function Component() {
  const [value, setValue] = useState(1);

  return (
    <div>
      <SpinningNumber fontSize={2}>{value}</SpinningNumber>
      <button onClick={() => setValue(value + 1)}>Increase</button>
    </div>
  );
}

Configuration

There props are allowed for the SpinningNumber component:

Property	Required	Type	Default	Description
children	✅	string | number	-	The number or string to spin.
fontSize	✅	number	-	Sets the font size (in rem) for the spinning numbers.
className	❌	string	-	Adds a custom class for additional styling.
style	❌	CSSProperties	-	Custom inline styles, excluding lineHeight, fontSize, margin, whiteSpace and padding.
duration	❌	number	300	Controls the duration of the each digits spin animation, in milliseconds.
stagger	❌	number	100	Adds a stagger effect to the spin animation, in milliseconds.

Credits

This project was inspired by the react-native-spinning-numbers library by birdwingo. A big thanks to them for their work, which served as a great inspiration for this project.