Skip to content
A Stopwatch Component built on top of React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
flow-typed/npm
media Added media folder Dec 4, 2017
src
.babelrc
.eslintignore
.eslintrc Changed flow config Apr 5, 2018
.flowconfig
.gitignore
.travis.yml
CHANGELOG.md
CONTRIBUTING.MD
LICENSE
README.md
package.json
yarn.lock

README.md

react-stopwatch

A Stopwatch Component built on top of React.

Travis npm package Coveralls

Demo

Installation

First, install the component:

yarn add react-stopwatch

or

npm install react-stopwatch --save

Usage

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

License

MIT license. Copyright © 2018.

You can’t perform that action at this time.