React-Fancy-Countdown

A fancy countdown component for React.

Demo

Live demo: https://abnerlin.github.io/React-Fancy-Countdown/

Installation

npm install --save react-fancy-countdown

Usage

Basic Countdown

This is basic usage, the more advanced usage please check Demo.

import { BasicCountdown } from 'react-fancy-countdown';
 
class App extends React.Component {
  ...
  render() {
    <BasicCountdown
      deadline="2030-12-31 14:23:22"
      format="Y[y] M[m] W[w] D[d] HH[hrs] mm[mins] ss[secs]" />
  }
}

Basic Countdown Props

Parameter|Type|Description ---------|----|----------- id|String|DOM Id. className|String|DOM class. deadline|String|Deadline, format must be "YYYY-MM-DD HH:mm:ss".Recommend to store deadline in State, once deadline updated in State, the countdown will reset. interval|Number|The interval(ms) for updating component.Deafult is 1000ms. format|String|years : Y or y months : M or MM weeks : W or WW days : D or DD hours : H or HH minutes: mm seconds: ss Escape token characters within the template string using square brackets. Example => Y[y] M[m] W[w] D[d] HH[hrs] mm[mins] ss[secs] callback|Function|The function will invoked when the time is up. Default is console.log('Time is up.'); dueElement|Element|The Element will show up to replace the countdown component when the time is up. Default is <div> Time is up. </div>

Flip Countdown

This is basic usage, the more advanced usage please check Demo.

import { FlipCountdown } from 'react-fancy-countdown';
import 'react-fancy-countdown/dist/countdown.css';
 
class App extends React.Component {
  ...
  render() {
    <FlipCountdown
      deadline="2030-12-31 14:23:22" />
  }
}

Flip Countdown Props

Parameter|Type|Description ---------|----|----------- id|String|DOM Id. className|String|DOM class. weeks|Boolean|Whether to show the unit "weeks". If "days" set to false, "weeks" will always be false. If "weeks" is false, please make sure the deadline won't over than 99 days! days|Boolean|Whether to show the unit "days". If "days" is false, plsease make sure the deadline won't over than 99 hours! deadline|String|Deadline, format must be "YYYY-MM-DD HH:mm:ss".Recommend to store deadline in State, once deadline updated in State, the countdown will reset. interval|Number|The interval(ms) for updating component.Deafult is 1000ms. callback|Function|The function will invoked when the time is up. Default is console.log('Time is up.'); dueElement|Element|The Element will show up to replace the countdown component when the time is up. Default is <div> Time is up. </div>

Slide Countdown

This is basic usage, the more advanced usage please check Demo.

import { SlideCountdown } from 'react-fancy-countdown';
import 'react-fancy-countdown/dist/countdown.css';

class App extends React.Component {
  ...
  render() {
    <SlideCountdown
      deadline="2030-12-31 14:23:22" />
  }
}

Slide Countdown Props

Parameter|Type|Description ---------|----|----------- id|String|DOM Id. className|String|DOM class. weeks|Boolean|Whether to show the unit "weeks". If "days" set to false, "weeks" will always be false. If "weeks" is false, please make sure the deadline won't over than 99 days! days|Boolean|Whether to show the unit "days". If "days" is false, plsease make sure the deadline won't over than 99 hours! deadline|String|Deadline, format must be "YYYY-MM-DD HH:mm:ss".Recommend to store deadline in State, once deadline updated in State, the countdown will reset. interval|Number|The interval(ms) for updating component.Deafult is 1000ms. callback|Function|The function will invoked when the time is up. Default is console.log('Time is up.'); dueElement|Element|The Element will show up to replace the countdown component when the time is up. Default is <div> Time is up. </div>