use-animated-number

Vite Plugin - React.js Animated Number

A custom React hook for animating numbers in React.js applications.

Installation

You can install this plugin through npm:

npm i use-animated-number

Usage

Example

import { useState } from "react";
import useAnimatedNumber from "use-animated-number";

export default function Header() {
    const duration: number = 300;
    const [ balance, setBalance ] = useState<number>(0);
    const animatedBalance: string = useAnimatedNumber(balance, duration);

    const increase = () => {
        const randomIncrement: number = Math.floor(Math.random() * 100) + 1;
        setBalance(prevState => prevState + randomIncrement);
    }

    return (
        <section>
            <span> {animatedBalance} </span>
            <button onClick={increase}>Increase balance</button>
        </section>
    )
}

License