@sakit-sa/countdown-timer
Simple, easy countdown timer for React
Countdown timer
Live Playground
For examples of the countdown-timer in action, go to https://abdilar.github.io/countdown-timer.
OR
To run that demo on your own computer:
- Clone this repository
npm install
npm run storybook
- Visit http://localhost:6006/
Getting Started
Install
npm install @sakit-sa/countdown-timer
Usage
import CountdownTimer from '@sakit-sa/countdown-timer';
<CountdownTimer
time={90}
format="[hh]:[mm]:[ss]"
onComplete={() => console.log("The timer completed")}
/>
Props
Name | Type | Default | Description |
---|---|---|---|
id | string |
countdown-timer-[random-number] |
The unique identifier for the component. |
className | object |
{} |
Apply a className to the control |
time | number |
required |
The value of the timer base on second. |
format | string |
HH:MM:SS |
Formats a time value. |
onComplete | function |
- |
Trigger when timer is zero. |
Format Token
Token | Description |
---|---|
HH |
Hours leading zero for single-digit hours. |
hh |
Hours no leading zero for single-digit hours. |
MM |
Minute leading zero for single-digit minute. |
mm |
Minute no leading zero for single-digit minute. |
SS |
Second leading zero for single-digit second. |
ss |
Second no leading zero for single-digit second. |
className Token
wrapperClass
symbolClass
digitClass
hourClass
minuteClass
secondClass
hourWrapperClass
minuteWrapperClass
secondWrapperClass
See examples for more information (go to https://abdilar.github.io/countdown-timer/?path=/story/theme--class-name)
License
MIT Licensed. © Copyright Saeed Abdilar