React-stopwatch NPM

react-stopwatch

A Stopwatch Component built on top of React.

Installation

First, install the component:

yarn add react-stopwatch

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)