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>