react-analog-timer
v1.5.7
Published
A lightweight react plugin to show analog watch on your website
Downloads
28
Maintainers
Readme
Welcome to V1 of React Analog Timer. In this package I have focused on keeping it simple and light weight. In order to do that I have used spacetime (https://www.npmjs.com/package/spacetime) which is very small library compare to momentjs and has momentjs like APIs.
Table of Contents
Installation
yarn add react-analog-timer or npm install react-analog-timer --save
Usage
import React, { Component } from 'react'
import { AnalogTimer } from 'react-analog-timer'
export default class MyApp extends Component {
onTimerEnds () {
console.log('timer ended')
}
render() {
return (
<AnalogTimer
ref={ref => { this.analogTimer = ref }}
timeZone={'Asia/Calcutta'} //optional
size={'md'} //optional
theme={'ios'} //optional
startTime={'10:45am'} //optional
endTime={{
time: '11:00pm',
callBack: this.onTimerEnds
}} //optional
border={'green'} // optional, hex colour code also acceptable
className={'myCustomClass'} //optional
background={'white'} // optional, hex colour code also acceptable
/>
)
}
}
Documentation
Props
- timeZone [String] Optional
- size [String] optional , possible values
xs,sm,md,lg - theme [String] optional, possible values
ios - startTime [String] optional, time format
hh:mm a - endTime [Object] optional, call the callback function at provided time. time format
hh:mm a - border [String]
- className [String]
- background [String]
Methods
- startTimer() {Void} start the timer if it is paused
- stopTimer() {void} stop timer if it is running
- resetTimer(time) {void} reset the timer to the start time or the time provided in the argument
- getCurrentTime() {time} return the time in
hh:mm aformat
