Countdown

React Bootstrap 5 Countdown plugin

Countdown plugin built with Bootstrap 5, React 18 and Material Design 2.0. Examples of timers, counters, stopwatch, number counts, counter box & more.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create default Countdown by adding countdown to a <MDBCountdown> component with a Countdown expiration date value. Add <MDBCountdownUnit> components and an property type with time unit to a child element to indicate which time units should be displayed inside Countdown. 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit />
      <MDBCountdownUnit type='hours' />
      <MDBCountdownUnit type='minutes' />
      <MDBCountdownUnit type='seconds' />
    </MDBCountdown>
  );
}

Interval

Create interval that will reset timer every time initial countdown ends.

import React, { useState } from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  const [defaultDate, setDefaultDate] = useState(new Date('5 November 2022 12:35'));

  const handleInterval = (date: any) => {
    const newDate = new Date(date.getTime() + 60000);
    setDefaultDate(newDate);
  };

  return (
    <MDBCountdown countdown={defaultDate} onEnd={() => handleInterval(defaultDate)}>
      <MDBCountdownUnit />
      <MDBCountdownUnit type='hours' />
      <MDBCountdownUnit type='minutes' />
      <MDBCountdownUnit type='seconds' />
    </MDBCountdown>
  );
}

Label

Create label for each time unit by adding label property with a text of your choice. 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit label='days' />
      <MDBCountdownUnit label='hours' type='hours' />
      <MDBCountdownUnit label='minutes' type='minutes' />
      <MDBCountdownUnit label='seconds' type='seconds' />
    </MDBCountdown>
  );
}

Separator

Add separator to a <MDBCountdown> component to insert separator between each time unit.

Separator won't be visible for Countdown column position

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown separator=':' countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit />
      <MDBCountdownUnit type='hours' />
      <MDBCountdownUnit type='minutes' />
      <MDBCountdownUnit type='seconds' />
    </MDBCountdown>
  );
}

Styling

Countdown position

Change default horizontal position of Countdown with position="vertical" property. 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown position='vertical' countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit />
      <MDBCountdownUnit type='hours' />
      <MDBCountdownUnit type='minutes' />
      <MDBCountdownUnit type='seconds' />
    </MDBCountdown>
  );
}

Label position

Change default vertical position of Countdown label with labelPosition="horizontal" 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown labelPosition='horizontal' countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit label='d' />
      <MDBCountdownUnit label='h' type='hours' />
      <MDBCountdownUnit label='m' type='minutes' />
      <MDBCountdownUnit label='s' type='seconds' />
    </MDBCountdown>
  );
}

Text size

Change default time unit text size (4rem) with textSize property. 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown textSize='6rem' countdown='31 December 2022 23:59:59'>
      <MDBCountdownUnit label='days' />
      <MDBCountdownUnit label='hours' type='hours' />
      <MDBCountdownUnit label='minutes' type='minutes' />
      <MDBCountdownUnit label='seconds' type='seconds' />
    </MDBCountdown>
  );
}

Custom classes

Add custom classes to time unit value and label with textClasses and labelClasses properties. 

import React from 'react';
import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

export default function App() {
  return (
    <MDBCountdown
      textClasses='badge bg-primary'
      labelClasses='text-light bg-dark'
      countdown='31 December 2022 23:59:59'
    >
      <MDBCountdownUnit label='days' />
      <MDBCountdownUnit label='hours' type='hours' />
      <MDBCountdownUnit label='minutes' type='minutes' />
      <MDBCountdownUnit label='seconds' type='seconds' />
    </MDBCountdown>
  );
}

Countdown - API

Import

import { MDBCountdown, MDBCountdownUnit } from 'mdb-react-countdown';

Properties

MDBCountdown

Name Type Default Description Example
className string '' Add custom class to MDBCountdown <MDBCountdown countdown="31 December 2022 23:59:59" className="class" />
separator string '' Attached to container element defines separator used between each time unit value. Separator is not visible in vertical position of the Countdown element. <MDBCountdown countdown="31 December 2022 23:59:59" separator=':' />
position 'horizontal' | 'vertical' 'horizontal' Positions Countdown element horizontally or vertically. <MDBCountdown countdown="31 December 2022 23:59:59" position='vertical' />
labelPosition 'horizontal' | 'vertical' 'vertical' Positions all labels at the bottom or next to the corresponding time unit value. <MDBCountdown countdown="31 December 2022 23:59:59" labelPosition='vertical' />
textSize string '' Sets size of time unit text element. Text for labels in vertical label position is four times smaller than time unit text. <MDBCountdown countdown="31 December 2022 23:59:59" textSize='6rem' />
textClasses string '' Adds custom styles to all time unit text elements. <MDBCountdown countdown="31 December 2022 23:59:59" textClasses="bg-primary badge" />
labelClasses string '' Adds custom styles to all labels. <MDBCountdown countdown="31 December 2022 23:59:59" labelClasses='text-white' />
countdown string | Date '' Takes the value of the date to which the timer will be counting. <MDBCountdown countdown="31 December 2022 23:59:59" />
countdownRef React.MutableObjectRef<any> A reference to the MDBCountdown component. <MDBCountdown countdownRef={someRef} />

MDBCountdownUnit

Name Type Default Description Example
className string '' Adds a custom class to the MDBCountdownUnit component. <MDBCountdownUnit className='bg-secondary' />
label string '' Defines a label text for the MDBCountdownUnit component. <MDBCountdownUnit label='Days' />
type 'days' | 'hours' | 'minutes' | 'seconds' 'days' Defines the type of the counter element. <MDBCountdownUnit type='seconds' />
ref React.Ref<any> A reference to the MDBCountdownUnit component. <MDBCountdownUnit ref={someRef} />

Events

MDBCountdown

Name Type Description
onStart () => void Fires when the counting starts
onEnd () => void Fires when the counting ends
onError (error: string) => void Fires when the problem with countdown property occurs. You can get the invalid value of it with error parameter.