react-countdown-clock-timer

react-countdown-clock-timer provides a timer functionality using reactJS.

Table of Contents

• Installation
• Examples
• Parameters
• Styling

Installation

To install, you can use npm or yarn:

$ npm install react-countdown-clock-timer

OR

$ yarn add react-countdown-clock-timer

Examples

Here is a simple example of react-countdown-clock-timer being used in an app. You can also get remaining duration with onPause, onResume and onReset callbacks.

import React from 'react';
import ReactDOM from 'react-dom';
import { Timer } from 'react-countdown-clock-timer';

const App = () => {
  return (
    <div className='timer-container'>
      <Timer
      durationInSeconds={120}
      formatted={true}
      isPaused={false}
      showPauseButton={true}
      showResetButton={true}
      
      onStart = {()=> {
        console.log('Triggered when the timer starts')
      }}
      onPause = {(remainingDuration)=> {
        console.log('Triggered when the timer is paused', remainingDuration)
      }}
      onFinish = {()=> {
        console.log('Triggered when the timer finishes')
      }}
      onReset = {(remainingDuration)=> {
        console.log('Triggered when the timer is reset', remainingDuration)
      }}
      onResume = {(remainingDuration)=> {
        console.log('Triggered when the timer is resumed', remainingDuration)
      }}
      />
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

Parameters

| Name | Description | Type | Default Value | |-------------------------------------|------------------------------------------------------------------------------------------------------------------|----------|----------| | durationInSeconds | Duration for which the timer runs | int | 0 | | formatted | Renders the timer in a formatted way (Formatted: 51m 22s, Unformatted: 00:51:22) | bool | false | | timerId | Timer resets when timerId changes | any | undefined | | isPaused | The parent component can pause/resume the timer using this prop | bool | false | | showPauseButton | Shows a button to pause/resume the timer if set to true | bool | false | | showResetButton | Shows a button to reset the timer if set to true | bool | false | | onStart | A callback function to run when the timer starts | ()=>void | undefined | | onFinish | A callback function to run when timer finishes | ()=>void |undefined | | onPause | A callback function to run when timer is paused | ()=>void | undefined | | onResume | A callback function to run when timer is resumed | ()=>void | undefined | | onReset | A callback function to run when the timer is reset | ()=>void |undefined |

Styling

We've provided class names for the following elements which can be used to add styling to them.

• div wrapping the Timer - timer-wrapper
• div wrapping the Pause and Reset buttons - buttons-wrapper
• Pause button - pause-button
• Reset button - reset-button