React useTimer
A simple timer that updates every millisecond that you can pause, resume, reset, and do something when the countdown completes.
Setup
First, add it to your project as you normally would.
$ yarn add react-use-timer
import useTimer from "react-use-timer";
Example Useage
Creating the Timer
Next, simply use the hook as so.
const Timer = useTimer(10.5, () => doSomethingWhenDone());
Interacting with the timer
To start the timer for the first time, or to resume the timer after pausing, simply call:
Timer.start()
Pausing the timer is just as simple:
Timer.pause()
To reset the timer back to zero at any time, just call:
Timer.reset()
If you'd like to know how much time is left on the timer, just observe the following value, which updates every millisecond:
Timer.seconds
If you need to know whether or not the timer is currently running, just use:
Timer.isActive
This returns false
if the timer is paused. It only returns true
when the timer is actively counting down.
If you needs to know how much time elapsed between the last start()
and pause()
, you can get it like do:
Timer.lastElapsed
If you need to manually change the timer's time outside of normal user interaction (such as rewinding or skipping), you can do it by passing a decimal seconds number to
Timer.setSeconds(someNewValue)
This allows you to, for example, rewind the timer like so (note, this will only work once because lastElapsed
only keeps track of the previous session):
Timer.setSeconds(Timer.seconds - Timer.lastElapsed)
Displaying the time remaining
If you wish to tell the user how much time the they have left, you could easily just do something like
<Text>{Math.floor(10.5 - Timer.seconds)}s</Text>
Which would output something like
6s
Note
The timer updates one thousand times per second, so if you're observing Timer.seconds
, ensure that you're not doing anything too crazy.