react-spinning-number v1.0.7

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:

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.