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.