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@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 |
| 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.
