/use-timer

A timer hook for React

Primary LanguageTypeScriptMIT LicenseMIT

⏱️ use-timer

npm Version License Linux Build Status Bundle size Bundle size

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>}
    </>
  );
};

Decremental timer

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

Timer with end time

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

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

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');
  },
});

When time is updated

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

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")