hooked-react-stopwatch

npm Coverage Status Build Status License Netlify Status

How component looks

Highly extensible, created without single class used but with pure :heart: to Hooks API. Shipped with basic CSS style!

DEMO

Installation

npm i hooked-react-stopwatch --save

Alternatively you may use yarn:

yarn add hooked-react-stopwatch

Link to npm: https://www.npmjs.com/package/hooked-react-stopwatch

Usage

import React, { Component } from 'react';
import { Stopwatch } from "hooked-react-stopwatch";
import "hooked-react-stopwatch/css/style.css"; // optional

class App extends Component {
  render() {
    return (
      <div className="App">
        <Stopwatch />
      </div>
    );
  }
}

export default App;

Props

StopWatch.propTypes = {
  // custom classNames
  stopwatchClassName: PropTypes.string,
  timeContainerClassName: PropTypes.string,
  controlsClassName: PropTypes.string,
  playIconClassName: PropTypes.string,
  pauseIconClassName: PropTypes.string,
  resetIconClassName: PropTypes.string,
  renderControls: PropTypes.func, // custom render function for controls section
  hideHours: PropTypes.bool, // hide hours
  hideMinutes: PropTypes.bool, // hide minutes
  hideSeconds: PropTypes.bool, // hide seconds
  hideMilliseconds: PropTypes.bool, // hide milliseconds
  separators: PropTypes.arrayOf(PropTypes.string) // separators to use between hours/minutes/seconds/milliseconds
  // separator use example: [":"/*separatorBetweenHoursAndMinutes*/, ":"/*separatorBetweenMinutesAndSeconds*/, "."/*separatorBetweenSecondsAndMilliseconds*/]
};

License:

Made with :sparkling_heart: by Bartlomiej Zuber (bartlomiej.zuber@outlook.com) while traveling around the world, and licensed under the MIT License