react-countup-animate

Less dependencies and less sizes and easy to use

Demo


Click here to try demo

How to use

Installation

``shell
npm isntall react-countup-animate
`

Example Code

`js
import Countup from "react-countup-animate";

function App() {
return (

//
//
);
}

export default App;
`

Options

| Parameter | Type | Default | Description |
| ------------------------- | -------------------------------- | ---------- | ---------------------------------------------------------- |
| number (req) | num or str | none | Number to display (numeric or string) |
| duration (opt) | num | 3 | Animation time in seconds. Default is 3 seconds. |
| startDelay (opt) | num or ease-in or ease-out | 0.1 | Start delay in seconds. Default is 0.1 seconds. |
| endDelay (opt) | num or ease-in or ease-out | 0.1 | Delay before stopping in seconds. Default is 0.1 seconds. |
| easeStartDuration (opt) | num | Max(n/3,1) | Execution time of the ease function for ease-in/out. |
| easeEndDuration (opt) | num | Max(n/3,1) | Execution time of the ease function for ease-in/out. |
| reverse (opt) | bool | false | Whether to start from the front or back. Default is false. |
| style (opt) | CSSProps | none | CSS styling (e.g., fontsize, fontweight, color). |

More Example

`js

`

![](https://velog.velcdn.com/images/toitoii080/post/def429de-5773-42ad-a48b-8a4f3656c2ba/image.gif)

`js

`

![](https://firebasestorage.googleapis.com/v0/b/myblog-3f34c.appspot.com/o/post%2F1711878176776.webp?alt=media&token=098a8827-e003-490b-a6ba-7d58c8af4989)

`js

``