@gabrielyotoo/react-use-timer ·

react-use-timer is a hook to help you with timers in React.

Installation

To install run the following command in your project's folder if you are using yarn

1yarn add @gabrielyotoo/react-use-timer

or if you are using npm

1npm install @gabrielyotoo/react-use-timer

Usage

A simple timer example showing the current time from 10 to 0.

1import { useTimer } from '@gabrielyotoo/react-use-timer';
2
3function App() {
4  const [finished, setFinished] = useState(false);
5
6  const { currentTime, isRunning, start, pause } = useTimer(10, {
7    onFinish: () => {
8      setFinished(true);
9    },
10    onStart: () => {
11      setFinished(false);
12    },
13  });
14
15  return (
16    <>
17      {finished ? <p>Finished!</p> : null}
18      <div>
19        {!isRunning ? (
20          <p>Not running! Timer at {currentTime}</p>
21        ) : (
22          <p>Timer at {currentTime}</p>
23        )}
24        <button onClick={start}>{!isRunning ? 'Start!' : 'Reset'}</button>
25        {isRunning ? <button onClick={pause}>Pause</button> : null}
26      </div>
27    </>
28  );
29}

You can also run the example project.

API

Name	Type	Description
useTimer(time: number, options?: UseTimerOptions): UseTimerReturn	function	Create timer with specified time

useTimer Params

Name	Type	Optional	Description
time	number	false	The amount of ticks to run
options	UseTimerOptions	true	The configuration for the timer

UseTimerReturn

Name	Type	Description
currentTime	number	The current time of the timer
start(): void	function	The function to start the timer
isRunning	boolean	If the timer is running or not
pause(): void	function	The function to pause the timer

UseTimerOptions

Name	Type	Optional	Description
autoStart	boolean	true	If the timer should start in the first render
interval	number	true	The interval in milliseconds between ticks
onStart(): void	function	true	The function to be called when the timer starts
onFinish(): void	function	true	The function to be called after the time's up

Contributing

Please, feel free to create issues and to open PRs. Be cautious to the tests and builds, because if your version doesn't pass they, your PR won't be approved and merged