react-countup-animate

Less dependencies and less sizes and easy to use

Demo

Click here to try demo

How to use

Installation

1npm isntall react-countup-animate

Example Code

1import Countup from "react-countup-animate";
2
3function App() {
4  return (
5    <Countup number={160000} />
6    // <Countup number={"160,000"} reverse={true} />
7    // <Countup number={123456} startDelay={0.5} endDelay={1} reverse={true} />
8  );
9}
10
11export 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

1<CountUp startDelay="ease-out" endDelay="ease-in" />

1<CountUp StartDelay="ease-out" endDelay="ease-in" easeStartDuration={1.5} />

1<CountUp startDelay="0.1" endDelay="ease-out" reverse={true} />