@inlightmedia/react-countdown-timer

A React component that counts down to a given ISO 8601 date/time, counts up from a given ISO 8601 date/time or counts down then counts up after the count down completes.

Usage no npm install needed!

<script type="module">
  import inlightmediaReactCountdownTimer from 'https://cdn.skypack.dev/@inlightmedia/react-countdown-timer';
</script>

README

React Countdown Timer

demo-image

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:

options-demo-image

License

MIT © Joshua Dyck