React-countplus NPM

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	-