# react-time-tracker-stopwatch > A React and TypeScript based stopwatch for time tracking. Latest version **0.0.4** (published 2019-11-26) · MIT license · 0 weekly downloads ## Install ```sh npm install react-time-tracker-stopwatch pnpm add react-time-tracker-stopwatch yarn add react-time-tracker-stopwatch bun add react-time-tracker-stopwatch ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.4 | | Published | 2019-11-26 | | First published | 2019-11-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 26.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | 722C | | Maintainers | 722c | | Keywords | React, TypeScript, time, tracking, stopwatch | ## Links - npm: https://www.npmjs.com/package/react-time-tracker-stopwatch - Repository: https://github.com/722C/react-time-tracker-stopwatch - Homepage: https://github.com/722C/react-time-tracker-stopwatch#readme - Issues: https://github.com/722C/react-time-tracker-stopwatch/issues - npm.io page: https://npm.io/package/react-time-tracker-stopwatch ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.4 (latest) — 2019-11-26 - 0.0.3 — 2019-11-26 - 0.0.2 — 2019-11-25 - 0.0.1 — 2019-11-23 ## README # react-time-tracker-stopwatch A React and TypeScript based stopwatch for time tracking. ## Installation ```bash 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. ```jsx 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 (
console.log(args)} ref={this.timeTracker} >
) } } ``` ### 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. | --- _Source: https://npm.io/package/react-time-tracker-stopwatch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._