https://github.com/devsethi3/react-countplus
A flexible and customizable React component for animated number counting.
https://github.com/devsethi3/react-countplus
animation counting npm-package rollup typescript
Last synced: about 2 months ago
JSON representation
A flexible and customizable React component for animated number counting.
- Host: GitHub
- URL: https://github.com/devsethi3/react-countplus
- Owner: Devsethi3
- Created: 2024-07-07T14:19:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T16:17:35.000Z (over 1 year ago)
- Last Synced: 2025-06-04T16:35:50.637Z (about 1 year ago)
- Topics: animation, counting, npm-package, rollup, typescript
- Language: TypeScript
- Homepage:
- Size: 8.88 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A flexible and customizable React component for animated number counting.
## Installation
Install the package using npm:
```bash
npm install react-countplus
```
## Usage
Here's a basic example of how to use the `CountPlus` component:
```jsx
import { useState } from "react";
import { CountPlus } from "react-countplus";
const App = () => {
const [key, setKey] = useState(0);
const handleRestart = () => {
setKey((prevKey) => prevKey + 1);
};
return (
CountPlus Demo
console.log("Animation started")}
onUpdate={(value) => console.log("Current value:", value)}
onEnd={() => console.log("Animation ended")}
/>
Restart Animation
);
};
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.