Simple React Circle Timer

Lightweight, easily implemented countdown timer with circular progress bar. Optional Play, Pause, and Reset buttons.

Accurate timekeeping:

Instead of relying on the component's state to keep track of time, which is very prone to bugs and innaccuracies, this timer uses interval checks on the current Date object, ensuring accurate results down to the millisecond.

Play/Pause/Reset:

Most importantly, this timer differs from others in the amount of control it gives the user. See below for how to implement your own buttons or trigger the Play, Pause, Reset functions.

Scalable display:

The progress bar animation is handled by pure CSS (including the play/pause display). The entire component itself is scalable to any size (using the 'size' and 'fontSize' props) and color (using the 'fillColor' and 'bgColor' props). The font family and other styling will inherit from your parent component.

Installation

yarn add simple-circle-timer

or

npm install simple-circle-timer

Basic Usage

1import {Timer} from 'simple-circle-timer'
2
3const YourComponent = () => (
4  <Timer/>
5)

Props

size : (int) length and width of component in pixels
fontSize : (int) size of text inside the circle
minutes : (float) number of minutes you want the timer to run for (whole numbers or decimals)
fillColor : (str) color of progress bar & countdown text (hex code or color)
bgColor : (str) color inside the circle (hex code or color)
showMs : (bool) show milliseconds in the displayed time
onComplete : (function) runs when the timer reaches 00:00
completeMsg : (str) text displayed when the time runs out
running : (bool) whether or not the timer is counting down
setRunning : (function) needs to be passed to Timer for play, pause, reset (see below)
reset : (bool) set to true momentarily to trigger reset (see below)
setReset : (function) needs to be passed to Timer for reset (see below)

Play, Pause, Reset

This component is designed to give the user control over the timer. Below is an example of how to set up buttons using React hooks to play, pause, reset, and mount the timer with different settings.

1import React, { useState } from 'react';
2import {Timer} from 'simple-circle-timer'
3
4const YourComponent = () => {
5  const [ timerExists, setTimerExists ] = useState( false )
6  const [ running, setRunning ] = useState( true )
7  const [ reset, setReset ] = useState( false )
8
9  //new timer is loaded in a paused state, awaiting 'play' command
10  const mountPaused = () => {
11    setTimerExists( true )
12    setRunning( false )
13  }
14
15  //new timer is loaded already in a running state
16  const mountRunning = () => {
17    setTimerExists( true )
18    setRunning( true )
19  }
20
21  //replace any/all of these buttons with your own components, or trigger the same state changes with functions from elsewhere in your app. 
22  return (
23    <>
24      <div style={{ display: 'grid' }}>
25        <button onClick={() => mountRunning()}>Load New Timer (running)</button>
26        <button onClick={() => mountPaused()}>Load New Timer (paused)</button>
27        <button onClick={() => setTimerExists( false )}>Remove Timer</button>
28        <button onClick={() => setRunning( true )}>Play</button>
29        <button onClick={() => setRunning( false )}>Pause</button>
30        <button onClick={() => setReset( true )}>Reset</button>
31      </div>
32      {timerExists ? <Timer running={running} setRunning={setRunning} reset={reset} setReset={setReset} /> : null}
33    </>
34  )
35}