@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