@sakit-sa/countdown-timer

This is a countdown-timer library for React

Usage no npm install needed!

<script type="module">
  import sakitSaCountdownTimer from 'https://cdn.skypack.dev/@sakit-sa/countdown-timer';
</script>

README

@sakit-sa/countdown-timer

Simple, easy countdown timer for React

NPM JavaScript Style Guide

Countdown timer

Spinner gif

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