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
;; Component { var settings = count: 5432 border: true showTitle: true noPoints: true ; return <CountdownTimer ...settings /> ; }
OR
;; Component { 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.