Countdown

Countdown renders the remaining time to a target moment as a list of time sections, updating every second until the end time is reached.

Example

<Countdown
  className="d-flex gap-3"
  endTime="2035-01-01T00:00:00"
  units={[
    {
      label: 'days',
      scale: 24
    },
    {
      label: 'hours',
      scale: 60
    },
    {
      label: 'minutes',
      scale: 60
    },
    {
      label: 'seconds',
      scale: 1000
    }
  ]}
/>

Units

units lists the sections from largest to smallest. Each scale is the amount of the next smaller unit that makes up one of the current unit, ending at milliseconds.

<Countdown
  endTime={launchDate}
  units={[
      { scale: 24, label: 'days' },
      { scale: 60, label: 'hours' },
      { scale: 60, label: 'minutes' },
      { scale: 1000, label: 'seconds' }
  ]}
  onEnd={endTime => console.log('Finished at', endTime)}
/>

itemClassName styles each section, and onEnd fires once when the countdown reaches zero.