A simple React component that displays a countdown timer which is customizable.
npm install --save react-cntdwn
If you are using yarn,
yarn add react-cntdwn
Below is an example of how this component might be used.
import Countdown from 'react-cntdwn';
const handleFinish = function () {
console.log('Skynet has become self-aware!');
}
<Countdown
targetDate={new Date('August 29, 1997')}
startDelay={2000}
interval={1000}
timeSeparator={':'}
leadingZero
onFinished={handleFinish}
/>The datetime to count until.
- type:
Date - required
The format used to display the remaining time. It is an object with keys day,
hour, minute, and second.
- type:
Object - optional
- default:
{
hour: 'HH',
minute: 'MM',
second: 'SS'
}The component uses 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.
The time in millisecond until the countdown begins.
- type:
Number - optional
- default:
0
The interval in millisecond for each tick in countdown.
- type:
Number - optional
- default:
1000
The callback function to be called when the countdown ends.
- type:
Function - optional
The string used to separate the different parts of the time
- type:
String - optional
- default:
The string used to separate day from time
- type:
String - optional
- default:
Prepends a leading zero onto the time elements for consistant width
- type:
Bool - optional
- default:
The source code for the component is found in src/cntdwn.jsx. It is using
es6 and is compiled using 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.
MIT