https://github.com/baughmann/react-use-timer
A simple timer that you can pause, resume, reset, and do something when the countdown completes.
https://github.com/baughmann/react-use-timer
Last synced: 6 days ago
JSON representation
A simple timer that you can pause, resume, reset, and do something when the countdown completes.
- Host: GitHub
- URL: https://github.com/baughmann/react-use-timer
- Owner: baughmann
- License: mit
- Created: 2020-01-20T21:24:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-26T17:28:36.000Z (over 5 years ago)
- Last Synced: 2025-05-06T08:17:01.023Z (14 days ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-use-timer
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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
```
{Math.floor(10.5 - Timer.seconds)}s
```
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.