https://github.com/afek-sakaju/countdown-react
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".
https://github.com/afek-sakaju/countdown-react
countdown custom-npm-package eslint jest jsdocs reactjs storybook styled-components
Last synced: about 2 months ago
JSON representation
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".
- Host: GitHub
- URL: https://github.com/afek-sakaju/countdown-react
- Owner: Afek-Sakaju
- Created: 2023-01-13T16:31:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T11:23:50.000Z (over 2 years ago)
- Last Synced: 2025-11-23T22:05:44.537Z (6 months ago)
- Topics: countdown, custom-npm-package, eslint, jest, jsdocs, reactjs, storybook, styled-components
- Language: JavaScript
- Homepage:
- Size: 26.5 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Countdown-React
### 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.
---
**Live demo:** [circular-countdown-react](https://Afek-Sakaju.github.io/countdown-react/)
---
## Configuration Options
### The countdown component offers a variety of configuration options to customize its appearance and functionality, including:
- **size**: You have the option to showcase the countdown face in 3 sizes: large, medium, small.
- **totalSeconds**: The countdown duration is specified in total seconds.
- **onDone**: You have the flexibility to optionally provide a function that will be executed when the countdown finishes.
- **shouldStop**: Allows for a more responsive countdown by accepting a changing state, while also supporting static countdown usage.
## Usage
```js
import React from "react";
import { Countdown } from "circular-countdown-react";
function App() {
return (
console.log("Done!")}
shouldStop={false}
/>
);
}
export default App;
```
**Installation:**
- `npm install circular-countdown-react`
Include the package in your project's dependencies.
**Peer dependencies:**
- _styled-components_
**Development:**
- `npm run build-jsdocs`For JSDocs of the utils functions, after running open the 'index.html' file located inside the 'js-docs' folder.
---
### **Here's an example showcasing the utilization of the countdown component:**
---
## Author
:octocat: **Afek Sakaju**
- LinkedIn: [@afeksa](https://www.linkedin.com/in/afeksa/)
- GitHub: [@Afek-Sakaju](https://github.com/Afek-Sakaju)