# react-stopwatch

> React Stopwatch component using Render Props

Latest version **2.0.4** (published 2019-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-stopwatch
pnpm add react-stopwatch
yarn add react-stopwatch
bun add react-stopwatch
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2019-07-24 |
| First published | 2017-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Sebastian Lorenzo |
| Maintainers | slorenzo |
| Keywords | react, component, react-component, components, ui, stopwatch, react-stopwatch |

## Links

- npm: https://www.npmjs.com/package/react-stopwatch
- Repository: https://github.com/slorenzo/react-stopwatch
- Issues: https://github.com/slorenzo/react-stopwatch/issues
- npm.io page: https://npm.io/package/react-stopwatch

## Dependencies (1)

- [ms](https://npm.io/package/ms.md) ^2.1.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 2.0.4 (latest) — 2019-07-24
- 2.0.3 — 2019-01-23
- 2.0.2 — 2019-01-18
- 2.0.1 — 2019-01-16
- 2.0.0 — 2019-01-12
- 1.1.1 — 2018-04-06
- 1.1.0 — 2018-04-05
- 1.0.3 — 2017-05-16
- 1.0.2 — 2017-04-28
- 1.0.1 — 2017-04-25
- 1.0.0 — 2017-04-25

## README

# react-stopwatch

> A Stopwatch Component built on top of React.

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][codecov-badge]][codecov]

<p align="center">
  <img src="https://github.com/slorenzo/react-stopwatch/blob/master/media/square.gif?raw=true" alt="Demo"/>
</p>

## 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 = () => (
  <ReactStopwatch
    seconds={0}
    minutes={0}
    hours={0}
    limit="00:00:10"
    onChange={({ hours, minutes, seconds }) => {
      // do something
    }}
    onCallback={() => console.log('Finish')}
    render={({ formatted, hours, minutes, seconds }) => {
      return (
        <div>
          <p>
            Formatted: { formatted }
          </p>
          <p>
            Hours: { hours }
          </p>
          <p>
            Minutes: { minutes }
          </p>
          <p>
            Seconds: { seconds }
          </p>
        </div>
      );
    }}
   />
);

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

---
_Source: https://npm.io/package/react-stopwatch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._