⏱️ 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](https://app.netlify.com/sites/use-timer/deploys)

🚀 Try last production version on Netlify!

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

Usage

$3

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

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

return (
<>


Elapsed time: {time}

{status === 'RUNNING' &&

Running...

}

);
};
`

$3

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

$3

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

$3

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

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

start();
advanceTime(10);

console.log(time); // 30
`

Callbacks

Some callback functions can be provided.

$3

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

$3

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