1.0.27 • Published 7 years ago

react-sexy-countdown v1.0.27

Weekly downloads
3
License
ISC
Repository
github
Last release
7 years ago

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

PropsTypeDefaultFormat Example
dateStringDate.now()2018-05-29T07:00:00+07:00
onEndCountdownFuncnull(count) => console.log(count)
langStringen"th" or "en"
displayTextObject{}{ Days: 'Days', Day: 'Day', Hours: 'Hours', Min: 'Min', Sec: 'Sec' }
lastTextTimeObject{}set text after number countdown example: { Day: 'D', Hours: 'H', Min: 'M', Sec: 'S' }
beforeTextTimeObject{}set text before number countdown example: { Day: 'D', Hours: 'H', Min: 'M', Sec: 'S' }
isDayDoubleZeroBooleantrue"00 : 00 : 00 : 00" if true "0 : 00 : 00 : 00"
isHoursDoubleZeroBooleantrue"00 : 00 : 00 : 00" if true "00 : 0 : 00 : 00"
isMinDoubleZeroBooleantrue"00 : 00 : 00 : 00" if true "00 : 00 : 0 : 00"
isSecDoubleZeroBooleantrue"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>
1.0.27

7 years ago

1.0.26

7 years ago

1.0.25

7 years ago

1.0.24

7 years ago

1.0.23

7 years ago

1.0.21

7 years ago

1.0.20

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago