@lolanextdoor-free/react-stopwatch

react-stopwatch

A simple Stopwatch component built on React.

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

• Sebastian Lorenzo (Javascript developer)
• E-mail: [e-mail]
• StackOverflow: sebastian-lorenzo

License

MIT license. Copyright © 2018.