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

| Prop | Type | Description | | --------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | startText | string? | Text for the control button to start the timer. Defaults to Start. | | stopText | string? | Text for the control button to stop the timer. Defaults to Stop. | | initialValue | number? | The initial value of the timer in seconds. Defaults to 0. | | initialStartTimestamp | number? | The initial starting timestamp of the timer in seconds. If this value is greater than or equal to zero, the timer will automatically be started with the given timestamp. If the value is not provided or is less than zero, the timer will not be started and the starting timestamp will be set to null. | | wrapClass | string? | The class of the div element wrapping the component. Defaults to time-tracker-wrap. | | inputClass | string? | The class of the input element of the component. Defaults to time-tracker-input. | | buttonClass | string? | The class of the button element of the component. Defaults to time-tracker-button. | | wrapStyle | React.CSSProperties? | Inline styles to be passed to the wrapping div element. | | inputStyle | React.CSSProperties? | Inline styles to be passed to the input element of the component. | | buttonStyle | React.CSSProperties? | Inline styles to be passed to the button element of the component. | | onTimeUpdate | (value: number, startTimestamp: number | null) => void | An update handler for the component. Will be called when the time updates. value is the current value of the component in seconds. startTimestamp is the UNIX timestamp of the most recent time the tracker started running in seconds or null if the timer is not running. |

Member Functions

| Function | Signature | Description | | ------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | setTimeTrackerState | (value: number, startTimestamp?: number) => void | A function used to set the value of the time tracker in seconds and control the state of the tracker. The startTimestamp argument can be used to control the running state of the time tracker with the following rules: a number greater than or equal to zero will start the timer with the given startTimestamp, a number less than zero will stop the timer, and undefined (including if no value is passed) will not affect the state of time tracker. |