circle-timer
v0.1.6
Published
A module that creates circular / radial timers and clocks
Downloads
6
Readme
circleTimer
A JS class for making circular / radial timers and clocks
Installation
Use npm to add the module to your project:
npm install -S circle-timer
Usage
Import it into your code:
import CircleTimer from 'circle-timer';
Instantiate the timer object. Use the new
keyword and pass it a single configuration argument:
this.circleTimer = new CircleTimer({
rootElement: document.getElementById('my-circle-timer')
})
Possible settings and their defaults:
rootElement
The DOM element that the circle will be attached to. Defaults to the body tag.
circleDuration
The number of seconds that the entire circle represents. Defaults to 60.
timerDuration
The number of seconds that will be counted down. Defaults to 60.
timerClass
An additional class (or classes) that will be added to the circle timer element.
radius
The radius of the circle. Defaults to 200.
units
The units used for radius and thickness. Defaults to 'px'.
color
The foreground color of the circle's ring. Defaults to 'lightskyblue'.
backgroundRingColor
The background color of the circle's ring. The color that's visible as the time slips away. Defaults to 'gainsboro' (a light gray).
backgroundRingShadow
The inner shadow of the circle's ring. Defaults to 'inset 0 0 5px rgba(0, 0, 0, 0.1)'.
thickness
The thickness of the circle's ring. Defaults to 25.
style
The style of the circle's ring. Accepts a valid border-style
value. Values other than solid
may result in odd visuals. Defaults to 'solid'.
Methods
startTimer
Takes no arguments. Starts the clock.
pauseTimer
Takes no arguments. Pauses the clock.
resetTimer
Takes no arguments. Resets the timer to its initial duration.
updateTimer
Takes a configuration object as its only argument. Allows you to change circleDuration
and timerDuration
. Resets the timer.
Usage in React
The simplest way to use this with react is inside of componentDidMount
. For example:
componentDidMount(){
var element = document.getElementById('circle-timer');
this.circleTimer = new CircleTimer({
rootElement: element,
color: 'red',
backgroundRingColor: 'gray',
})
}