{"id":26053507,"url":"https://github.com/afek-sakaju/countdown-react","last_synced_at":"2026-04-07T20:31:42.833Z","repository":{"id":92477559,"uuid":"588647403","full_name":"Afek-Sakaju/countdown-react","owner":"Afek-Sakaju","description":"Countdown component for ReactJS applications (available as an NPM package), developed during my time at the JLT coding bootcamp.  Users can set total seconds, customize halting behavior, adjust size, and integrate dynamic actions with \"onDone\".","archived":false,"fork":false,"pushed_at":"2023-11-09T11:23:50.000Z","size":27741,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-11-23T22:05:44.537Z","etag":null,"topics":["countdown","custom-npm-package","eslint","jest","jsdocs","reactjs","storybook","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Afek-Sakaju.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}},"created_at":"2023-01-13T16:31:00.000Z","updated_at":"2025-01-17T23:25:50.000Z","dependencies_parsed_at":"2024-11-19T01:41:44.561Z","dependency_job_id":"3dfd8f19-4f7d-43aa-9a1c-d43f21d52541","html_url":"https://github.com/Afek-Sakaju/countdown-react","commit_stats":null,"previous_names":["afek-sakaju/countdown-react","afektheminilearner/countdown-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Afek-Sakaju/countdown-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Afek-Sakaju%2Fcountdown-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Afek-Sakaju%2Fcountdown-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Afek-Sakaju%2Fcountdown-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Afek-Sakaju%2Fcountdown-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Afek-Sakaju","download_url":"https://codeload.github.com/Afek-Sakaju/countdown-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Afek-Sakaju%2Fcountdown-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["countdown","custom-npm-package","eslint","jest","jsdocs","reactjs","storybook","styled-components"],"created_at":"2025-03-08T07:42:59.717Z","updated_at":"2026-04-07T20:31:42.808Z","avatar_url":"https://github.com/Afek-Sakaju.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Countdown-React\n\n### This NPM package offers a reusable countdown timer component tailored for ReactJS applications, enabling developers to effortlessly integrate a countdown feature with customizable options. The component is developed using ReactJS, Styled-Components, and ESLint, ensuring a seamless blend of design and functionality. \u003cbr /\u003e\n\n\u003cimg src=\"./readme-resources/stopwatch.png\" width=150px height=150px align=\"right\"\u003e\n\n---\n\n**Live demo:** \u003c/br\u003e[circular-countdown-react](https://Afek-Sakaju.github.io/countdown-react/)\n\n---\n\n## Configuration Options\n\n### The countdown component offers a variety of configuration options to customize its appearance and functionality, including:\n\n- **size**: You have the option to showcase the countdown face in 3 sizes: large, medium, small.\n- **totalSeconds**: The countdown duration is specified in total seconds.\n- **onDone**: You have the flexibility to optionally provide a function that will be executed when the countdown finishes.\n- **shouldStop**: Allows for a more responsive countdown by accepting a changing state, while also supporting static countdown usage.\n\n\u003c/br\u003e\n\n## Usage\n\n```js\nimport React from \"react\";\nimport { Countdown } from \"circular-countdown-react\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"app-container\"\u003e\n      \u003cCountdown\n        size=\"large\"\n        totalSeconds={60}\n        onDone={() =\u003e console.log(\"Done!\")}\n        shouldStop={false}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n**Installation:**\u003c/br\u003e\n\n- `npm install circular-countdown-react` \u003cbr /\u003e Include the package in your project's dependencies.\n\n**Peer dependencies:**\u003c/br\u003e\n\n- _styled-components_\n\n**Development:**\u003c/br\u003e\n\n- `npm run build-jsdocs`\u003c/br\u003eFor JSDocs of the utils functions, after running open the 'index.html' file located inside the 'js-docs' folder.\n\n---\n\n### **Here's an example showcasing the utilization of the countdown component:**\n\n![Example-GIF](./readme-resources/countdown-gif.gif)\n\n---\n\n## Author\n\n:octocat: **Afek Sakaju**\n\n- LinkedIn: [@afeksa](https://www.linkedin.com/in/afeksa/)\n- GitHub: [@Afek-Sakaju](https://github.com/Afek-Sakaju)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafek-sakaju%2Fcountdown-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafek-sakaju%2Fcountdown-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafek-sakaju%2Fcountdown-react/lists"}