useCountup

A hook that provides a numeric count-up with pause, play, and reset controls. Perfect for implementing progressive counters, scores, or any ascending numeric display.

Parameters

• min: number - The number to start counting from
• max: number - The number to count up to

Returns

• current: string - Current count value as string
• isPaused: boolean - Whether the count-up is paused
• isOver: boolean - Whether the count-up has reached max value
• pause: () => void - Function to pause the count-up
• play: () => void - Function to start/resume the count-up
• reset: () => void - Function to reset to min value
• togglePause: () => void - Function to toggle pause state

Usage

import { useCountup } from '@rhinolabs/react-hooks';
 
function ScoreCounter() {
  const { 
    current, 
    isPaused,
    isOver,
    togglePause,
    reset 
  } = useCountup(0, 100);
 
  return (
    <div>
      <h2>Score: {current}</h2>
      
      <button onClick={togglePause}>
        {isPaused ? 'Resume' : 'Pause'}
      </button>
      
      <button onClick={reset}>
        Reset Score
      </button>
 
      {isOver && (
        <div>Maximum score reached!</div>
      )}
    </div>
  );
}

Notes

• Counts up by 1 each second
• Updates until reaching max value
• Includes pause/play/reset controls
• Provides current count as string
• Auto-cleanup on unmount
• Handles completion state
• Maintains count boundaries