Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sungwoncho/react-cntdwn
A simple, customizable countdown timer for React
https://github.com/sungwoncho/react-cntdwn
Last synced: about 2 months ago
JSON representation
A simple, customizable countdown timer for React
- Host: GitHub
- URL: https://github.com/sungwoncho/react-cntdwn
- Owner: sungwoncho
- License: mit
- Created: 2015-12-12T06:01:13.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-29T21:56:31.000Z (about 7 years ago)
- Last Synced: 2024-11-01T18:51:45.251Z (2 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 27
- Watchers: 2
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-cntdwn
A simple React component that displays a countdown timer which is customizable.
## Installation
npm install --save react-cntdwn
If you are using yarn,
yarn add react-cntdwn
## Usage example
Below is an example of how this component might be used.
```js
import Countdown from 'react-cntdwn';
const handleFinish = function () {
console.log('Skynet has become self-aware!');
}
```
## Props
### targetDate
The datetime to count until.
* type: `Date`
* required
### [format]
The format used to display the remaining time. It is an object with keys `day`,
`hour`, `minute`, and `second`.
* type: `Object`
* optional
* default:
```js
{
hour: 'HH',
minute: 'MM',
second: 'SS'
}
```
The component uses [millisec](https://github.com/sungwoncho/millisec) npm
module to convert the remaining time into human a readable format. You can use
any format type supported by `millisec` to customize the output to a great
degree.
Find all available formats [here](https://github.com/sungwoncho/millisec#formatoutput).
### [startDelay]
The time in millisecond until the countdown begins.
* type: `Number`
* optional
* default: `0`
### [interval]
The interval in millisecond for each tick in countdown.
* type: `Number`
* optional
* default: `1000`
### [onFinished]
The callback function to be called when the countdown ends.
* type: `Function`
* optional
### [timeSeparator]
The string used to separate the different parts of the time
* type: `String`
* optional
* default: ` `
### [leadingZero]
Prepends a leading zero onto the time elements for consistant width
* type: `Bool`
* optional
* default:
## Contribution guide
The source code for the component is found in `src/cntdwn.jsx`. It is using
es6 and is compiled using [babel](https://github.com/babel/babel) before being
published to npm.
You may run `npm run compile` at any time to compile `src/cntdwn.jsx` to
`dist/cntdwn.jsx`. But most likely you won't need to, because it is run
automatically before `npm publish`.
## License
MIT