Skip to content

savalanpour/react-component-countdown-timer

Repository files navigation

React component Countdown Timer

This is a simple countdown timer react component.

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.