react-stopwatch

2.0.4 • Public • Published

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.

Package Sidebar

Install

npm i react-stopwatch

Weekly Downloads

341

Version

2.0.4

License

MIT

Unpacked Size

29.2 kB

Total Files

13

Last publish

Collaborators

  • slorenzo