Not Preposterously Macho

    react-use-timer

    0.1.5 • Public • Published

    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.

    Install

    npm i react-use-timer

    DownloadsWeekly Downloads

    0

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    6.66 kB

    Total Files

    5

    Last publish

    Collaborators

    • nbaughman