❤
npm
Sign UpSign In

react-sexy-countdown

1.0.27 • Public • Published

react-sexy-countdown

GitHub package version Build Download

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 }
/>

view

view

view

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>

Readme

Keywords

Package Sidebar

Install

npm i react-sexy-countdown

Repository

github.com/thisJJ/react-sexy-countdown

Homepage

github.com/thisJJ/react-sexy-countdown#readme

Weekly Downloads

5

Version

1.0.27

License

ISC

Unpacked Size

14.5 kB

Total Files

8

Last publish

Collaborators

  • thinnakrit
Try on RunKit
Report malware