@jcnoon/test-package

React Timer and Stopwatch hook

A simple out of the box but highly customizable timer and stopwatch hook for React.

Contents

• Installation
• Setup
  • Duration timer
  • Unix timer
  • Stopwatch
• Control Functions
• Customization
  • Display
  • Callbacks
  • Misc Options
• Common Properties
• Terminology
• License

Installation

npm install react-timer-and-stopwatch

Setup

There are three ways to set up the timer hook: countdown with a duration of time, countdown with a Unix timestamp in milliseconds, or as a stopwatch.

Duration timer

To set up a timer with a duration, use the timerWithDuration object property on useTimer's options.create object parameter. Inside of timerWithDuration are two properties, time (required) and the optional directionOfTimeForward bool property. The time property takes either a number of milliseconds or alternatively a time object. The optional directionOfTimeForward bool property controls whether the direction of the timer will flow forward (start at 00:00:00) or backward (start at end, finish at 00:00:00). Time flows backward by default on Duration timers.

Example

const SomeReactComponent = () => {
    const timer = useTimer({
        create: {
            timerWithDuration: {
                time: { // Set a duration of 1 minute and 30 seconds
                    minutes: 1,
                    seconds: 30
                }
            }
        }
    });
    return (
        <span>Time Left: {timer.timerText}</span>
    );
}

This span element will show the following each tick:

Time Left: 00:01:30
Time Left: 00:01:29
Time Left: 00:01:28
etc.

---

Unix timer

To set up a timer with a Unix timestamp, use the timerWithTimestamp object property on useTimer's options.create object parameter.

Example

const SomeReactComponent = () => {
    const unixTimestamp = Date.now() + 10000; // 10 seconds in the future
    const timer = useTimer({
        create: {
            timerWithUnixTimestamp: {
                unixTimestampMilliseconds: unixTimestamp
            }
        }
    });
    return (
        <span>Time Left: {timer.timerText}</span>
    );
}

This span element will show the following each tick:

Time Left: 00:00:10
Time Left: 00:00:09
Time Left: 00:00:08
etc.

If you'd like the Unix timer to go past its finish and show the time elapsed from the finish in negative numbers, you can set the optional property continueAfterFinish to true on options.create.timerWithUnixTimestamp. By default it's set to false. It's also easy to integrate a Unix timer with popular JavaScript time libraries such as Moment.js and Luxon because in the end all you need is the Unix time in milliseconds.

Moment.js example

import moment from 'moment';
const SomeReactComponent = () => {
    const unixTimestamp = moment('2025-08-14T11:04:10.570Z').valueOf(); // Using an ISO 8601 timestamp
    const timer = useTimer({
        create: {
            timerWithUnixTimestamp: {
                unixTimestampMilliseconds: unixTimestamp
            }
        }
    });
    return (
        <span>Time Left: {timer.timerText}</span>
    );
}

---

Stopwatch

To set up a stopwatch, set the property stopwatch to an object on useTimer's options.create object parameter. There are two properties on the options object, intervalRate and includeMilliseconds, which can be useful here. If you'd like your stopwatch to count by milliseconds and show milliseconds in the output, change the optional properties intervalRate to something smaller than 1000 and includeMilliseconds to true in options. If not included, by default the stopwatch will count by seconds and not show milliseconds in timerText. It will also autostart by default, which can be disabled by setting the optional options property autostart to false.

Example

const SomeReactComponent = () => {
    const timer = useTimer({
        create: {
            stopwatch: {}
        },
        includeMilliseconds: true,
        intervalRate: 47
    });
    return (
        <span>Time Left: {timer.timerText}</span>
    );
}

If you'd like to start the stopwatch past 0, you can set the optional startAtMilliseconds property on create.stopwatch to the number of milliseconds you wish.

---

Control Functions

There are functions returned by useTimer which can pause, resume, and reset the Timer component. These are togglePause, pauseTimer, resumeTimer, and resetTimer. There's also a boolean returned, timerIsPaused, which shows if the Timer is currently paused or not.

Example

const SomeReactComponent = () => {
    const timer = useTimer({
        create: {
            timerWithDuration: {
                time: { // Set to a duration of 30 seconds
                    seconds: 30
                }
            }
        }
    });
    const {togglePause, pauseTimer, resumeTimer, resetTimer, timerIsPaused, timerText} = timer;
    return (
        <>
            <span>Time Left: {timerText}</span>
            <button onClick={pauseTimer} disabled={timerIsPaused}>Pause</button>
            <button onClick={resumeTimer} disabled={!timerIsPaused}>Resume</button>
            <button onClick={togglePause} disabled={!timerIsPaused}>Toggle Pause</button>
            <button onClick={resetTimer}>Reset Timer</button>
        </>
    );
}

There are also functions to add and subtract time from the current timer/stopwatch. These are addTime and subtractTime. Both take either a number of milliseconds or alternatively a time object.

Example

const SomeReactComponent = () => {
    const timer = useTimer({
        create: {
            timerWithDuration: {
                time: { // Set to a duration of 1 day
                    days: 1
                }
            }
        }
    });
    return (
        <>
            <button onClick={() => addTime({seconds: 10})}>Add 10 seconds</button>
            <button onClick={() => subtractTime({seconds: 10})}>Subtract 10 seconds</button>
            <span>Time Left: {timer.timerText}</span>
        </>
    );
}

Note: none of these control functions affect Unix timestamp timers.

---

Customization

timerText

There are two optional properties on useTimer's options object that affect the timer/stopwatch's timerText string output.

Property	Type	Purpose	Default
textOutputWithWords	boolean	Whether the timerText string is only numbers, e.g. "00:01:45", or numbers with words, e.g. "1 minute, 45 seconds"	false, only numbers
includeMilliseconds	boolean	Whether milliseconds are included on the timerText string	false

Callbacks

There are several optional callbacks you can provide to the timer to fire at various points in time: an onTick callback that fires every interval, an onFinish callback that fires when the timer completes, and there are also arrays of callbacks you can provide for onProgress callbacks that fire at provided times into a timer and onTimeLeft callbacks that fire when there's a provided time left on the timer. onTimeLeft and onFinish callbacks will never fire on Stopwatches.

Example

const SomeReactComponent = () => {
    const timer = useTimer({
        create: {
            timerWithDuration: {
                time: { // Set a duration of 1 minute and 30 seconds
                    minutes: 1,
                    seconds: 30
                }
            }
        },
        callbacks: {
            onTick: () => console.log('This runs every interval.'),
            onFinish: () => alert('The timer is done.'),
            onProgress: [
                {
                    time: { seconds: 10 },
                    callback: () => console.log('This is firing 10 seconds into the timer.')
                },
                {
                    time: { seconds: 20 },
                    callback: () => console.log('This is firing 20 seconds into the timer.')
                }
            ],
            onTimeLeft: [
                {
                    time: { seconds: 5 },
                    callback: () => console.log('This is firing when there is 5 seconds left on the timer.')
                },
                {
                    time: { seconds: 3 },
                    callback: () => console.log('This is firing when there is 3 seconds left on the timer.')
                },
            ]

        }
    });
    return (
        <span>Time Left: {timer.timerText}</span>
    );
}

---

Misc Options

The rest of the optional customization properties you can include with the useTimer options object parameter:

Property	Type	Purpose	Default
autoplay	boolean	Whether the timer starts right away. Has no effect on UnixTimestamps, which is always true.	true
includeMilliseconds	boolean	Includes milliseconds in timerText string	false
intervalRate	number	How many milliseconds between each interval tick.	1000
textOutputWithWords	boolean	timerText output in only numbers "01:20:10" or with words "1 hour, 20 minutes, 10 seconds"	false

---

Common Properties

Property	Type	Purpose
time	number or time object	Any time you need to provide a representation of time in a time property in options, the property takes either a number of milliseconds or a time object, which is an object with keys of units of time (milliseconds, seconds, minutes, hours, and days) and values of numbers.

---

Terminology

Term	Definition
Time Object	An object that has keys of units of time (milliseconds, seconds, minutes, hours, and days) and values of numbers. Example: { hours: 2, minutes: 20, seconds: 40 }

---

License

Licensed under the MIT license