{"id":27404463,"url":"https://github.com/devsethi3/react-countplus","last_synced_at":"2026-04-22T21:39:47.743Z","repository":{"id":247240621,"uuid":"825343483","full_name":"Devsethi3/react-countplus","owner":"Devsethi3","description":"A flexible and customizable React component for animated number counting.","archived":false,"fork":false,"pushed_at":"2024-10-01T16:17:35.000Z","size":9312,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T16:35:50.637Z","etag":null,"topics":["animation","counting","npm-package","rollup","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Devsethi3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-07T14:19:54.000Z","updated_at":"2024-10-01T16:17:39.000Z","dependencies_parsed_at":"2024-07-07T15:48:46.305Z","dependency_job_id":"420eaa88-b2ea-43a4-b148-eb79bca5f87a","html_url":"https://github.com/Devsethi3/react-countplus","commit_stats":null,"previous_names":["devsethi3/react-countplus"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Devsethi3/react-countplus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devsethi3%2Freact-countplus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devsethi3%2Freact-countplus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devsethi3%2Freact-countplus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devsethi3%2Freact-countplus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Devsethi3","download_url":"https://codeload.github.com/Devsethi3/react-countplus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devsethi3%2Freact-countplus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260945175,"owners_count":23086963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","counting","npm-package","rollup","typescript"],"created_at":"2025-04-14T05:29:41.376Z","updated_at":"2026-04-22T21:39:47.689Z","avatar_url":"https://github.com/Devsethi3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A flexible and customizable React component for animated number counting.\n\n## Installation\n\nInstall the package using npm:\n\n```bash\nnpm install react-countplus\n```\n\n## Usage\n\nHere's a basic example of how to use the `CountPlus` component:\n\n```jsx\nimport { useState } from \"react\";\nimport { CountPlus } from \"react-countplus\";\n\nconst App = () =\u003e {\n  const [key, setKey] = useState(0);\n\n  const handleRestart = () =\u003e {\n    setKey((prevKey) =\u003e prevKey + 1);\n  };\n  return (\n    \u003cdiv style={{ textAlign: \"center\", padding: \"50px\" }}\u003e\n      \u003ch1\u003eCountPlus Demo\u003c/h1\u003e\n      \u003cdiv style={{ fontSize: \"48px\", marginBottom: \"20px\" }}\u003e\n        \u003cCountPlus\n          key={key}\n          start={0}\n          end={1000}\n          duration={5}\n          separator=\",\"\n          decimals={2}\n          decimal=\".\"\n          prefix=\"$\"\n          suffix=\" USD\"\n          onStart={() =\u003e console.log(\"Animation started\")}\n          onUpdate={(value) =\u003e console.log(\"Current value:\", value)}\n          onEnd={() =\u003e console.log(\"Animation ended\")}\n        /\u003e\n      \u003c/div\u003e\n      \u003cbutton onClick={handleRestart}\u003eRestart Animation\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\nThe `CountPlus` component accepts the following props:\n\n| Prop Name   | Type     | Description                                                    | Default Value |\n| ----------- | -------- | -------------------------------------------------------------- | ------------- |\n| `start`     | number   | The number to start counting from                              | 0             |\n| `end`       | number   | The final number to count up to (required)                     | -             |\n| `duration`  | number   | Duration of the count animation in seconds                     | 2             |\n| `decimals`  | number   | Number of decimal places to show                               | 0             |\n| `separator` | string   | Character used as the thousands separator                      | \",\"           |\n| `decimal`   | string   | Character used as the decimal point                            | \".\"           |\n| `prefix`    | string   | String to display before the number                            | \"\"            |\n| `suffix`    | string   | String to display after the number                             | \"\"            |\n| `delay`     | number   | Delay in milliseconds before starting the animation            | 0             |\n| `onStart`   | function | Callback function called when the animation starts             | -             |\n| `onUpdate`  | function | Callback function called on each update with the current value | -             |\n| `onEnd`     | function | Callback function called when the animation completes          | -             |\n\n## Features\n\n- Smooth counting animation\n- Customizable duration and easing\n- Support for decimal numbers\n- Prefix and suffix support\n- Customizable thousand separator and decimal point\n- Delay option for starting the animation\n- Start, update, and end callbacks\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request if you'd like to contribute to this project.\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the GitHub repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsethi3%2Freact-countplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsethi3%2Freact-countplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsethi3%2Freact-countplus/lists"}