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

| Props | Type | Default | Format Example | | ------------- |:-------------:| --------------------:| -----------------:| | date | String | Date.now() | 2018-05-29T07:00:00+07:00 | | onEndCountdown | Func | null | (count) => console.log(count) | | lang | String | en | "th" or "en" | | displayText | Object | {} | { Days: 'Days', Day: 'Day', Hours: 'Hours', Min: 'Min', Sec: 'Sec' } | | lastTextTime | Object | {} | set text after number countdown example: { Day: 'D', Hours: 'H', Min: 'M', Sec: 'S' } | | beforeTextTime | Object | {} | set text before number countdown example: { Day: 'D', Hours: 'H', Min: 'M', Sec: 'S' } | |isDayDoubleZero|Boolean| true| "00 : 00 : 00 : 00" if true "0 : 00 : 00 : 00" | |isHoursDoubleZero|Boolean| true| "00 : 00 : 00 : 00" if true "00 : 0 : 00 : 00"| |isMinDoubleZero|Boolean| true| "00 : 00 : 00 : 00" if true "00 : 00 : 0 : 00"| |isSecDoubleZero|Boolean| true| "00 : 00 : 00 : 00" if true "00 : 00 : 00 : 0"|

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>