https://github.com/saeta-eth/react-stopwatch
A Stopwatch Component built on top of React.
https://github.com/saeta-eth/react-stopwatch
react react-stopwacth stopwatch
Last synced: 7 months ago
JSON representation
A Stopwatch Component built on top of React.
- Host: GitHub
- URL: https://github.com/saeta-eth/react-stopwatch
- Owner: saeta-eth
- License: mit
- Created: 2017-04-17T14:54:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T03:13:47.000Z (about 3 years ago)
- Last Synced: 2025-05-12T23:46:18.216Z (8 months ago)
- Topics: react, react-stopwacth, stopwatch
- Language: JavaScript
- Homepage:
- Size: 4.35 MB
- Stars: 24
- Watchers: 1
- Forks: 7
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.MD
- License: LICENSE
Awesome Lists containing this project
README
# react-stopwatch
> A Stopwatch Component built on top of React.
[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][codecov-badge]][codecov]
## Installation
First, install the component:
```bash
yarn add react-stopwatch
```
or
```bash
npm install react-stopwatch --save
```
### Usage
```js
import * as React from 'react';
import ReactStopwatch from 'react-stopwatch';
const Stopwatch = () => (
{
// do something
}}
onCallback={() => console.log('Finish')}
render={({ formatted, hours, minutes, seconds }) => {
return (
Formatted: { formatted }
Hours: { hours }
Minutes: { minutes }
Seconds: { seconds }
);
}}
/>
);
export default Stopwatch;
```
### Properties
- `seconds`: Integer. Needs to be between `0 >= seconds <= 60`. (Required)
- `minutes`: Integer. Needs to be between `0 >= minutes <= 60`. (Required)
- `hours`: Integer. Needs to be `0 >= hours`. (Required)
- `limit`: String. Need to have the following format `XX:XX:XX`. (Optional)
- `withLoop`: Boolean. If it is `true` when the watch is equal to `limit`, it makes a loop. (Optional)
- `autoStart`: Boolean. Start counting time. Default: true (Optional)
- `onCallback`: Function. If you need to do something when the watch is equal to `limit`. (Optional)
- `onChange`: Function. It returns the values each second. (Optional)
## Made with ❤ by
- Sebastian Lorenzo (Javascript developer)
- E-mail: [SebastianLorenzo@gmail.com](mailto:SebastianLorenzo@gmail.com)
- StackOverflow: [sebastian-lorenzo](http://stackoverflow.com/users/1741027/sebastian-lorenzo?tab=profile)
## License
MIT license. Copyright © 2018.
[build-badge]: https://travis-ci.org/slorenzo/react-stopwatch.svg?branch=master
[build]: https://travis-ci.org/slorenzo/react-stopwatch
[npm-badge]: https://img.shields.io/npm/v/react-stopwatch.svg
[npm]: https://www.npmjs.org/package/react-stopwatch
[codecov-badge]: https://codecov.io/gh/slorenzo/react-stopwatch/branch/master/graph/badge.svg
[codecov]: https://codecov.io/gh/slorenzo/react-stopwatch