simpleUseTimer

simpleUseTimer is a bare-bones React Hook that helps time events. It returns two functions, one which starts the timer, and one that gets the time elapsed since the start. Calling the start function again will reset the timer.

Install

• npm install simple-use-timer or
• yarn add simple-use-timer

Use

import React, { useState } from 'react';
import useTimer from 'simple-use-timer';

const TimerTest = () => {
  const [timeStarted, setTimeStarted] = useState(false);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [startTime, getTime] = useTimer();

  const handleTimerClick = () => {
    if (timeStarted) {
      setElapsedTime(getTime());
    } else {
      startTime();
      setTimeStarted(true);
    }
  };

  return (
    <>
      <button type="button" onClick={handleTimerClick}>
        {timeStarted ? 'Stop Timer' : 'Start Timer'}
      </button>
      {elapsedTime > 0 && <h2>Elapsed time is {elapsedTime / 1000} seconds</h2>}
    </>
  );
};