use-timer

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

Installation

npm i use-timer

With Yarn:

yarn add use-timer

Demo

Netlify Status

? Try last production version on Netlify!

https://use-timer.netlify.app/

Usage

Basic timer

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

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

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

Decremental timer

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

Timer with end time

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

Advance time

This works for all types of timer (incremental and decremental).

const { time, start, advanceTime } = useTimer({
  initialTime: 20,
});

start();
advanceTime(10);

console.log(time); // 30
React TSX

Callbacks

Some callback functions can be provided.

When time is over

const { time, start, pause, reset, status } = useTimer({
  endTime,
  onTimeOver: () => {
    console.log('Time is over');
  },
});
React TSX

When time is updated

const { time, start, pause, reset, status } = useTimer({
  endTime,
  onTimeUpdate: (time) => {
    console.log('Time is updated', time);
  },
});
React TSX

Configuration

The configuration and all its parameters are optional.

Property Type Default value Description
autostart boolean false Pass true to start timer automatically
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
onTimeUpdate function Callback function that is called when time is updated
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")

GitHub

https://github.com/thibaultboursier/use-timer