react-stopwatch
A simple Stopwatch component built on React.
Installation
First, install the component:
yarn add react-stopwatch
or
npm install react-stopwatch --save
Usage
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';
ReactDom.render(
<Stopwatch
seconds={0}
minutes={0}
hours={0}
limit={"00:00:10"}
withLoop={true}
onCallback={() => console.log('Finish')}
/>,
document.getElementById('app')
);
Customization
There are two themes:
-
primary
: The watch has a circle shape (Default) -
secondary
: The watch has a square shape.
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';
ReactDom.render(
<Stopwatch
seconds={0}
minutes={0}
hours={0}
theme='primary' // theme='secondary'
/>,
document.getElementById('app')
);
If you want to do the watch would appears with your own styles. You just need to put your styles inside of containerOutter
and containerInner
.
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';
const styles = {
containerOutter: {
width: '250px',
height: '250px'
},
containerInner: {
lineHeight: '10'
}
}
ReactDom.render(
<Stopwatch
seconds={0}
minutes={0}
hours={0}
custom={styles}
/>,
document.getElementById('app')
);
Properties
-
seconds
: Integer. Needs to be between0 >= seconds <= 60
. (Required) -
minutes
: Integer. Needs to be between0 >= minutes <= 60
. (Required) -
hours
: Integer. Needs to be0 >= hours
. (Required) -
limit
: String. Need to have the following formatXX:XX:XX
. (Optional) -
withLoop
: Boolean. If it istrue
when the watch is equal tolimit
, it makes a loop. (Optional) -
onCallback
: Function. If you need to do something when the watch is equal tolimit
. (Optional)
❤ by
Made with - Sebastian Lorenzo (Javascript developer)
- E-mail: SebastianLorenzo@gmail.com
- StackOverflow: sebastian-lorenzo
License
MIT license. Copyright © 2018.