Nerdy People Matriculate

    @bradgarropy/use-timer
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    useTimer

    version downloads size github actions coverage typescript contributing contributors discord

    React hook implementation of a stopwatch. Featured in MURPHY.

    next link

    📦 Installation

    This package is hosted on npm.

    npm install @bradgarropy/use-timer

    🥑 Usage

    Import the useTimer hook in any React component, then call it to receive a timer that holds the state and functions which implement a stopwatch.

    import useTimer from "@bradgarropy/use-timer"
    
    const App = () => {
        const timer = useTimer()
    
        timer.start()
    
        timer.lap()
        timer.lap()
        timer.lap()
    
        timer.stop()
    
        console.log(timer.elapsedTime)
        // 3000
    
        console.log(timer.laps)
        // [
        //   {start: 0, end: 1000, time: 1000},
        //   {start: 1000, end: 2000, time: 1000},
        //   {start: 2000, end: 3000, time: 1000}
        // ]
    
        timer.reset()
    }

    📖 API Reference

    useTimer()

    Instantiates a timer, which updates with the latest values. No arguments are required. The hook returns an object with everything needed to implement a stopwatch.

    Name Type Example Description
    isActive boolean false Indicates that the timer is active, either running or paused.
    isInactive boolean true Indicates that the timer is inactive, and hasn't been started.
    isRunning boolean false Indicates if the timer is running.
    isPaused boolean false Indicates if the timer is paused.
    elapsedTime number 0 Total time in milliseconds.
    laps object [] Array of laps.
    start function function Starts the timer.
    stop function function Pauses the timer.
    reset function function Resets the timer.
    lap function function Adds a new lap.

    The elapsedTime is expressed in milliseconds, and has a resolution of 10ms.

    Each of the control functions are ignored in certain situations.

    • start does nothing if the timer is already running.
    • stop does nothing if the timer is already paused.
    • reset does nothing if the timer is inactive.
    • lap does nothing if the timer is paused.

    Questions

    🐛 report bugs by filing issues
    📢 provide feedback with issues or on twitter
    🙋🏼‍♂️ use my ama or twitter to ask any other questions

    contributors


    Brad Garropy

    💻 📖 ⚠️ 🚇

    Sam Apter

    🐛 📖

    Install

    npm i @bradgarropy/use-timer

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • bradgarropy