React hook to create a countup functionality.
Add the hook via the CLI:
npx @novajslabs/cli add useCountup
Or copy and paste the code into your project:
import { useState, useEffect } from 'react'
interface Counter {
current: string
isPaused: boolean
isOver: boolean
pause: () => void
play: () => void
reset: () => void
togglePause: () => void
}
export const useCountup = (min: number, max: number): Counter => {
const [count, setCount] = useState(min)
const [paused, setPaused] = useState(false)
const [isOver, setIsOver] = useState(false)
useEffect(() => {
if (paused) {
return
}
const interval = setInterval(() => {
setCount((prev) => prev + 1)
}, 1000)
if (count >= max) {
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(min)
},
togglePause: () => {
setPaused(!paused)
},
}
}
React 16.8 or higher
- Name
min
- Type
- number
- Required
- required
- Description
The inital value of the counter.
- Name
max
- Type
- number
- Required
- required
- Description
The final 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 { useCountup } from './hooks/useCountup'
const App = () => {
const { current, isPaused, isOver, pause, play, reset, togglePause } =
useCountup(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:
- Tracking elapsed time in a web-based workout timer
- Implementing a real-time progress indicator for an online course completion tracker
- Developing a time-tracking feature for billing hours in a freelance management tool
- Integrating a countdown timer for an online exam platform
- Adding a time-tracking feature to a project management tool for tracking task durations