react-sexy-countdown v1.0.27

react-sexy-countdown

Install

npm i --save react-sexy-countdown

Import

import Countdown from 'react-sexy-countdown'

##Support this date&time format only

2018-05-29T07:00:00+07:00

Can use moment-timezone for convert format

const dateFormat = moment.tz(1527552000000, 'Asia/Bangkok').format() 
console.log(dateFormat); //2018-05-29T07:00:00+07:00

Config props

using

<Countdown
  date="2018-05-29T07:00:00+07:00"
  onEndCountdown={ (count) => console.log(count) }
  lang="th"
  displayText={{
    Days: 'วัน',
    Day: 'วัน',
    Hours: 'ชั่วโมง',
    Min: 'นาที',
    Sec: 'วินาที',
  }}
  lastTextTime={{
    Day: 'D'
  }}
  isDayDoubleZero={ true }
/>

Style (with className for you custom style)

  <div className="react-countdown-container">
    <div className="react-countdown-box">
      <div className="react-countdown-element">
        <div className="react-countdown-time-text">Day</div>
        <div className="react-countdown-time">
          <span className="react-countdown-before-text-day">is</span>
            12 
          <span className="react-countdown-last-text-day">D</span>
        </div>
      </div>
    </div>

    <div className="react-countdown-box">
      <div className="react-countdown-element">
        <div className="react-countdown-time-text">Houts</div>
        <div className="react-countdown-time">
          <span className="react-countdown-before-text-hours">is</span>
            12 
          <span className="react-countdown-last-text-hours">H</span>
        </div>
      </div>
    </div>


    <div className="react-countdown-box">
      <div className="react-countdown-element">
        <div className="react-countdown-time-text">Min</div>
        <div className="react-countdown-time">
          <span className="react-countdown-before-text-min">is</span>
            12 
          <span className="react-countdown-last-text-min">M</span>
        </div>
      </div>
    </div>

    <div className="react-countdown-box">
      <div className="react-countdown-element">
        <div className="react-countdown-time-text">Sec</div>
        <div className="react-countdown-time">
          <span className="react-countdown-before-text-sec">is</span>
            12 
          <span className="react-countdown-last-text-sec">S</span>
        </div>
      </div>
    </div>
  </div>