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> ); }

PAY ONCE

USE FOREVER

Hurry up ⌛ claim exclusive long term passes available only during Cyber Weeks

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.