A simple stopwatch component built on React.
JavaScript HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

react-stopwatch

A simple Stopwatch component built on React.

Demo

Installation

First, install the component:

yarn add react-stopwatch

or

npm install react-stopwatch --save

Usage

import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    limit={"00:00:10"}
    withLoop={true}
    onCallback={() => console.log('Finish')}
   />,
  document.getElementById('app')
);

Customization

There are two themes:

  • primary: The watch has a circle shape (Default)
  • secondary: The watch has a square shape.
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    theme='primary' // theme='secondary'
   />,
  document.getElementById('app')
);

If you want to do the watch would appears with your own styles. You just need to put your styles inside of containerOutter and containerInner.

import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

const styles = {
  containerOutter: {
    width: '250px',
    height: '250px'
  },
  containerInner: {
    lineHeight: '10'
  }
}

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    custom={styles}
   />,
  document.getElementById('app')
);

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)
  • onCallback: Function. If you need to do something when the watch is equal to limit. (Optional)

Made with ❤ by

License

MIT license. Copyright © 2018.