react-countplus

A flexible and customizable React component for animated number counting.

Installation

Install the package using npm:

npm install react-countplus

Usage

Here's a basic example of how to use the CountPlus component:

import { useState } from "react";
import { CountPlus } from "react-countplus";

const App = () => {
  const [key, setKey] = useState(0);

  const handleRestart = () => {
    setKey((prevKey) => prevKey + 1);
  };
  return (
    <div style={{ textAlign: "center", padding: "50px" }}>
      <h1>CountPlus Demo</h1>
      <div style={{ fontSize: "48px", marginBottom: "20px" }}>
        <CountPlus
          key={key}
          start={0}
          end={1000}
          duration={5}
          separator=","
          decimals={2}
          decimal="."
          prefix="$"
          suffix=" USD"
          onStart={() => console.log("Animation started")}
          onUpdate={(value) => console.log("Current value:", value)}
          onEnd={() => console.log("Animation ended")}
        />
      </div>
      <button onClick={handleRestart}>Restart Animation</button>
    </div>
  );
};

export default App;

Props

The CountPlus component accepts the following props:

Prop Name	Type	Description	Default Value
start	number	The number to start counting from	0
end	number	The final number to count up to (required)	-
duration	number	Duration of the count animation in seconds	2
decimals	number	Number of decimal places to show	0
separator	string	Character used as the thousands separator	","
decimal	string	Character used as the decimal point	"."
prefix	string	String to display before the number	""
suffix	string	String to display after the number	""
delay	number	Delay in milliseconds before starting the animation	0
onStart	function	Callback function called when the animation starts	-
onUpdate	function	Callback function called on each update with the current value	-
onEnd	function	Callback function called when the animation completes	-

Features

• Smooth counting animation
• Customizable duration and easing
• Support for decimal numbers
• Prefix and suffix support
• Customizable thousand separator and decimal point
• Delay option for starting the animation
• Start, update, and end callbacks

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to this project.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.