@dead_fish/react-countup

Demo

Go Try

Usage

import {useState, useEffect} from 'react'
import CountUp from '@dead_fish/react-countup'
import '@dead_fish/react-countup/dist/lib/Countup.css'

export default function App(){
    const [count, setCount] = useState(0)
    
    useEffect(() => {
        // fetch data from server and set count
        setTimeout(() =>{
            setCount(123456)
        }, 1000)
    }, [])

    return (
        <>
            {count === 0 ? 0 : (
                <Countup
                    value={count}
                    className='container'
                    itemClassName='item'
                    itemStyle={() => ({ 
                        fontSize: 30,
                        width: 100, 
                        height: 100,
                        backgroundColor: '#ccc' 
                    })}
                />
            )}
        </>
    )
}

Props

| Prop | Type | Default | Description | | ------------- | -------- | ---------- | ---------------------------------------- | | value | number | 0 | The value to be displayed | | className | string | '' | The class name of the container | | itemClassName | string | '' | The class name of each item | | duration | number | 2 | The duration of the animation in seconds | | style | object | {} | The style of the container | | itemStyle | function | () => ({}) | The style of each item |