https://github.com/afek-sakaju/countdown-react
This project is an NPM package that seamlessly integrates a ReactJS countdown component, offering enhanced functionality for any application.
https://github.com/afek-sakaju/countdown-react
countdown custom-npm-package eslint jest jsdocs reactjs storybook styled-components
Last synced: 11 months ago
JSON representation
This project is an NPM package that seamlessly integrates a ReactJS countdown component, offering enhanced functionality for any application.
- Host: GitHub
- URL: https://github.com/afek-sakaju/countdown-react
- Owner: Afek-Sakaju
- Created: 2023-01-13T16:31:00.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T11:23:50.000Z (over 2 years ago)
- Last Synced: 2024-07-31T11:11:57.531Z (over 1 year 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)