React Timer Stopwatch

1. What is it

This is open source project contain React component ReactTimerStopwatch which have timer and stopwatch.

2. Download

If you use npm

npm install --save react-stopwatch-timer

Or yarn

yarn add react-stopwatch-timer

3. Usage

You can import component like below:

import ReactStopwatchTimer from 'react-stopwatch-timer';

$3

isOn: true or false(default) true make stopwatch or timer will start

watchType: stopwatch or timer default variable is unset. In this props you can choose to your watch work like stopwatch or timer

fromTime: Date object, default is present time. More about Date. This props set time for stopwatch or timer will start it

displayCircle: true or false(default) decide about display beautiful circle around timer or stopwatch

children: You can put some button or etc. inside circle

displayHours: true(default) or false If you don't need hours in your watch you can set this props for false

displayMinutes: true(default) or false If you don't need minutes in your watch you can set this props for false

displaySeconds: true(default) or false If you don't need seconds in your watch you can set this props for false

color: circle elements color. Default props is unset

hintColor: hint color. Default props is unset
callback: function start after timer finish works

$3

#### Watch without circle
!example

``js
import React from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const App = () => {
return (

);
};

export default App;
`
#### Watch with circle
!example

`js
import React from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const App = () => {
return (

);
};

export default App;
`
#### Stopwatch
!example

`js
import React from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const fromTime = new Date(0, 0, 0, 0, 0, 0, 0);

const App = () => {
return (
displayCricle={true} color="gray" hintColor="red" fromTime={fromTime}/>
);
};

export default App;
`
#### Timer
!example

`js
import React from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const fromTime = new Date(0, 0, 0, 0, 10, 0, 0);

const App = () => {
return (
displayCricle={true} color="gray" hintColor="red" fromTime={fromTime}/>
);
};

export default App;
`
#### Without Hours
!example

`js
import React from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const fromTime = new Date(0, 0, 0, 0, 10, 0, 0);

const App = () => {
return (
displayCricle={true} color="gray" hintColor="red" fromTime={fromTime} displayHours={false}/>
);
};

export default App;
`
#### With button inside circle
!example

`js
import React, {useState} from 'react';
import ReactTimerStopwatch from 'react-stopwatch-timer';

const fromTime = new Date(0, 0, 0, 0, 10, 0, 0);

const App = () => {

const [isOn, setIsOn] = useState(false);

return (
displayCricle={true} color="gray" hintColor="red" fromTime={fromTime} displayHours={false}>
setIsOn(true) }>START

);
};

export default App;
`
#### Custom style circle element
!example

in js file:
import './App.css'

in css or scss file:

`css
.react-stopwatch-timer__element {
width: 3px !important;
height: 3px !important;
border-radius: 5px;
}

.react-stopwatch-timer__table{
width: 300px !important;
height: 300px !important;
}
``

4 License

_GNU General Public License v3.0_

5 Code Link

Click here

Author

Mateusz Karłowski Github Profile