react-moment-countdown

An unopinionated countdown component for React using moment.js.

Installation

$ npm install react-moment-countdown --save

How to use

Insert javascript Date instance into toDate props:

      import React from 'react';
      import ReactMomentCountDown from 'react-moment-countdown';

      export default function CountDownComponent () {
        const dateInFuture = new Date('2017-12-31');

        return (
          <ReactMomentCountDown toDate={dateInFuture} />
        );
      };

Insert moment instance into toDate props:

   import React from 'react';
   import ReactMomentCountDown from 'react-moment-countdown';
   import moment from 'moment';

   export default function CountDownComponent () {
     const dateInFuture = moment('2017-12-31', 'YYYY-MM-DD');

     return (
       <ReactMomentCountDown toDate={dateInFuture} />
     );
   };

Insert string value into toDate props with additional sourceFormatMask props:

The default value of sourceFormatMask props is YYYY-MM-DD.

   import {render} from 'react-dom'
   import ReactMomentCountDown from 'react-moment-countdown'

   render(
     <ReactMomentCountDown toDate='2017-12-31 23:59:59' sourceFormatMask='YYYY-MM-DD HH:mm:ss' />,
     document.getElementById('sample-date')
   )

Customize

targetFormatMask props

You can customize countdown format display with targetFormatMask props (default is 'HH:mm:ss'), for example

   import {render} from 'react-dom'
   import ReactMomentCountDown from 'react-moment-countdown'
   import moment from 'moment'

   const sampleDate = moment('2017-12-31')

   render(
     <ReactMomentCountDown toDate={sampleDate} targetFormatMask='DD:HH:mm:ss' />,
     document.getElementById('sample-date')
   )

onTick and onCountdownEnd props

You can add onTick function to trigger actions for every tick and onCountdownEnd to trigger actions when countdown timer has ended

  import React, {PureComponent} from 'react'
  import ReactMomentCountDown from 'react-moment-countdown'
  import moment from 'moment'

  export default class SampleClass extends PureComponent {
    constructor (props) {
      super(props)
      this.state = { endCountdown: false }
      this.sampleOnTick = this.sampleOnTick.bind(this)
      this.sampleOnCountdownEnd = this.sampleOnCountdownEnd.bind(this)
    }
    sampleOnTick (countdown) {
      this.setState({ endCountdown: countdown <= 0 })
    }
    sampleOnCountdownEnd () {
      console.log('Happy Birthday to you :)')
    }
    render () {
      const dateInFuture = moment('2017-12-31', 'YYYY-MM-DD');
      return (
        <ReactMomentCountDown toDate={dateInFuture}
          onTick={this.sampleOnTick}
          onCountdownEnd={this.sampleOnCountdownEnd} />
      )
    }
  }

TO-DO

• <input disabled="" type="checkbox"> Add unit test
• <input disabled="" type="checkbox"> Add a Storybook for examples and UI tests