luispuig/use-timer

A timer hook for React

use-timer

Simple timer turned into React Hooks. Read about Hooks feature.

Installation

npm i use-timer --save

Examples

Try demo here: https://stackblitz.com/edit/use-timer.

Usage

Basic timer

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

const App = () => {
  const { time, start, pause, reset, isRunning } = useTimer();

  return (
    <>
      <div>
        <button onClick={start}>Start</button>
        <button onClick={pause}>Pause</button>
        <button onClick={reset}>Reset</button>
      </div>
      <p>Elapsed time: {time}</p>
      {isRunning && <p>Running...</p>}
    </>
  );
};

Decremental timer

const { time, start, pause, reset, isRunning } = useTimer({
  initialTime: 100,
  timerType: 'DECREMENTAL',
});

Timer with end time

const { time, start, pause, reset, isRunning } = useTimer({
  endTime: 30,
  initialTime: 10,
});

Configuration

The configuration and all its parameters are optional.

Property	Type	Default value	Description
endTime	number	null	the value for which timer stops
initialTime	number	0	the starting value for the timer
interval	number	1000	the interval in milliseconds
onTimeOver	function		callback function that is called when time is over
step	number	1	the value to add to each increment / decrement
timerType	string	"INCREMENTAL"	the choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL")