README
React Countdown Timer
Install
yarn add @inlightmedia/react-countdown-timer
or
npm install @inlightmedia/react-countdown-timer
Basic Usage
Just pass in a dateTime prop with an ISO 8601 formatted time string and you'll get all the default functionality out-of-the-box. If you use a future date and time it will count down. If you use a past date and time it will count up. By default, when it finishes counting down it will begin to count up.
<CountDownTimer dateTime="20-07-25T21:22:19Z">
Note: To use this countdown/timer, you'll need to use an ISO 8601 formatted dateTime string.
This format uses:
<year>-<month>-<day>T<hour>:<minute>:<second><offset>
Offset is the relative time difference from UTC/GMT. The vast majority of time, using Z, which means zero offset is a safe and easy choice with this component.
For Example:
2020-07-25T21:22:19Z (with zero offset from UTC - recommended for most use cases)
2020-08-27T23:12:15-04:00 (with timezone offset)
Optional Properties
Option | Description | Default | Type |
---|---|---|---|
shouldSwitchToTimerAfterCountdown | If true, the counter will turn into a count-up timer when the count-down reaches zero | true | boolean |
timerTextColor | Colour with which to display the count-up timer text | 'red' | string |
shouldShowTimeUnits | If true, this will show a letter representing the time unit after its respective number (e.g. 55m or 10h or 55s) | false | boolean |
shouldShowSeparator | If true, this will show the colon between time units. If false, a space will be used | true | boolean |
shouldHidePrecedingZeros | If true, seconds, minutes, hours, and days will show preceding zeros (e.g. 003:02:02:05) | true | boolean |
style | A style object can be passed in for inline css styles to be applied to the time text paragraph tag | {} | object |
onCountdownCompletion | A callback function that will be called once when the countdown completes | ()=>null | ()=>void |
The same component as above but with some different options:
License
MIT © Joshua Dyck