useCountdown

React hook to create a countdown functionality.

import { useState, useEffect } from 'react'

interface Counter {
  current: string
  isPaused: boolean
  isOver: boolean
  pause: () => void
  play: () => void
  reset: () => void
  togglePause: () => void
}

export const useCountdown = (min: number, max: number): Counter => {
  const [count, setCount] = useState(max)
  const [paused, setPaused] = useState(false)
  const [isOver, setIsOver] = useState(false)

  useEffect(() => {
    if (paused) {
      return
    }

    const interval = setInterval(() => {
      setCount((prev) => prev - 1)
    }, 1000)

    if (count <= min) {
      setIsOver(true)
      clearInterval(interval)
      return
    }

    return () => clearInterval(interval)
  }, [count, min, max, paused])

  return {
    current: count.toString(),
    isPaused: paused,
    isOver,
    pause: () => setPaused(true),
    play: () => setPaused(false),
    reset: () => {
      setIsOver(false)
      setCount(max)
    },
    togglePause: () => {
      setPaused(!paused)
    },
  }
}

React 16.8 or higher

  • Name
    min
    Type
    number
    Required
    required
    Description

    The final value of the counter.

  • Name
    max
    Type
    number
    Required
    required
    Description

    The initial value of the counter.

  • Name
    current
    Type
    string
    Description

    The current value of the counter.

  • Name
    isPaused
    Type
    boolean
    Description

    Represents whether the counter is paused (true) or not (false).

  • Name
    isOver
    Type
    boolean
    Description

    Represents whether the counter has ended paused (true) or not (false).

  • Name
    pause
    Type
    function
    Description

    Pause the counter.

  • Name
    play
    Type
    function
    Description

    Play the counter.

  • Name
    reset
    Type
    function
    Description

    Reset the counter.

  • Name
    togglePause
    Type
    function
    Description

    Toggle between pausing and playing the counter.

import { useCountdown } from './hooks/useCountdown'

const App = () => {
  const { current, isPaused, isOver, pause, play, reset, togglePause } =
    useCountdown(0, 10)

  return (
    <div>
      <p>Counter value: {current}</p>
      <p>Is the counter paused? {isPaused ? 'Yes' : 'No'}</p>
      <p>Has the counter over? {isOver ? 'Yes' : 'No'}</p>
      <button onClick={pause}>Pause</button>
      <button onClick={play}>Play</button>
      <button onClick={reset}>Reset</button>
      <button onClick={togglePause}>Toggle Pause</button>
    </div>
  )
}

export default App

Here are some use cases where this React hook is useful:

  • Creating a countdown timer for an online quiz application
  • Implementing a time-limited task completion feature in a productivity tool
  • Developing a countdown clock for an online auction platform
  • Adding a time-limited challenge mode to a fitness tracking app
  • Integrating a countdown timer for a time-bound multiplayer game lobby