React-component-countdown-timer NPM

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

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	() => {}