react-component-countdown-timer

React component Countdown Timer

This is a simple countdown timer react component.

Demo

The demo app source code lives inside the src/docs folder.

Documentation

Installation

npm

npm install react-component-countdown-timer --save

⚠️ Also install react-component-countdown-timer for css

@import "~react-component-countdown-timer/lib/styles.css";

Example

import React from "react";
import CountdownTimer from "react-component-countdown-timer";

class SimpleCountdownTimer extends React.Component {
  render() {
    var settings = {
      count: 5432,
      border: true,
      showTitle: true,
      noPoints: true,
    };
    return (
      <CountdownTimer {...settings} />
    );
  }
}

OR

import React from "react";
import CountdownTimer from "react-component-countdown-timer";

class SimpleCountdownTimer extends React.Component {
  render() {
    return (
      <CountdownTimer count={5432} border showTitle noPoints />
    );
  }
}

Common API

Name	Type	Default	Description
className	string	''	Additional CSS class for the root DOM node
id	string	''	Additional id for the root DOM node
count	number	0	The count value of the timer base on second
border	boolean	false	If the value is true, it means a react-component-countdown-timer has a border
showTitle	boolean	false	If the value is true, it means a react-component-countdown-timer has a title top of each section
direction	right or left	left	Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value. When marks is not an empty object, step can be set to null, to make marks as steps.
noPoints	boolean	false	If vertical is true, the react-component-countdown-timer will be : between each section .
color	string	#000
backgroundColor	string	#fff
responsive	boolean	false	If true, with is responsive.
size	number	18	count number font size
labelSize	number	12	if showTitle is true this set label font size
responsive	boolean	false	If true, with is responsive.
hideDay	boolean	false	If true, hide day.
hideHours	boolean	false	If true, hide hours .
dayTitle	string	Day
hourTitle	string	Hour
minuteTitle	string	Min
secondTitle	string	Sec
onEnd	Function	() => {}

License

react-component-countdown-timer is released under the MIT license.