@akash3gupta/react-count-down-timer

Countdown timer is a common UI component. It is just a simple stop watch kind of UI clock.

Usage no npm install needed!

<script type="module">
  import akash3guptaReactCountDownTimer from 'https://cdn.skypack.dev/@akash3gupta/react-count-down-timer';
</script>

README

react-count-down-timer

Countdown timer is a common UI component and it is just a simple stop watch kind of UI clock.

NPM JavaScript Style Guide

Install

npm install @akash3gupta/react-count-down-timer

Usage

import React from 'react'

import { ReactCountDownTimer } from '@akash3gupta/react-count-down-timer'

const App = () => {

  const durationOfTimer = 20; // in minutes

  const handleTimerTick = () => {
    console.log('Trigger after every 1 mins');
  }

  const handleTimerCompleted = () => {
    console.log('Trigger after time completed');
  }

  const customStyles = {
    color: 'red',
    fontSize: '20px'
  }

  return <ReactCountDownTimer
          id={'your id'}  // this is optional prop just to give unique id to element
          classes={'your class'}  // this is optional prop just to give your custom classes
          styles={customStyles}  // this is optional prop just to give your custom styles
          duration={durationOfTimer}
          onTimerTick={handleTimerTick}
          onTimerCompleted={handleTimerCompleted}
        />
}

export default App

Demo

License

MIT ©