Countdown

React Bootstrap 5 Countdown plugin

Countdown plugin built with Bootstrap 5, React 17 and Material Design. 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" />
onStart () => void Fires when the counting starts <MDBCountdown countdown="31 December 2022 23:59:59" onStart={() => console.log('Start')} />
onEnd () => void Fires when the counting ends <MDBCountdown countdown="31 December 2022 23:59:59" onEnd={() => console.log('End')} />
onError (error: string) => void Fires when the problem with countdown property occurs. You can get the invalid value of it with error parameter. <MDBCountdown countdown="31 December 2022 23:59:59" onError={(error: string) => console.log('That value caused the problem', error)} />
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} />