react-time-tracker-stopwatch v0.0.4

react-time-tracker-stopwatch

A React and TypeScript based stopwatch for time tracking.

Installation

npm install --save react-time-tracker-stopwatch
# or
yarn add react-time-tracker-stopwatch

Usage

Styling is not included, but with only three internal elements and a wide array of properties to modify the styling of said elements, this should be fairly simple to work into whatever project.

import * as React from 'react';
import TimeTracker from 'react-time-tracker-stopwatch';

class MyTimer extends React.Component {
  constructor(props, ...args) {
    super(props, ...args);
    this.timeTracker = React.createRef();
  }

  render() {
    return (
      <div>
        <TimeTracker
          onTimeUpdate={(...args) => console.log(args)}
          ref={this.timeTracker}
        >
        <button
          onClick={() => this.timeTracker.current.setTimeTrackerState(0)}
        >
          Reset to 0:00:00 but don't change whether or not the tracker is running.
        </button>
        <button
          onClick={() => this.timeTracker.current.setTimeTrackerState(0, 0)}
        >
          Reset to 0:00:00 but make sure the tracker is running.
        </button>
        <button
          onClick={() => this.timeTracker.current.setTimeTrackerState(0, -1)}
        >
          Reset to 0:00:00 but make sure the tracker is not running.
        </button>
        <button
          onClick={() => this.timeTracker.current.setTimeTrackerState(3600, -1)}
        >
          Reset to 1:00:00 but make sure the tracker is not running.
        </button>
      </div>
    )
  }
}

Props

Member Functions