Rehooks
Content

useCountUp

Custom hook that implements a count-up functionality.

useCountUp

Usage

Component.tsx
import { useCountup } from "~/hooks/useCountUp";
 
function Component() {
  const [counter, { startCountup, stopCountup, resetCountup }] = useCountup({
    countStart: 10,
    intervalMs: 1000,
    countStop: Infinity,
  });
 
  return (
    <div>
      <h2>Countup Demo</h2>
      <p>Current Count: {counter}</p>
      <button onClick={startCountup}>Start Countup</button>
      <button onClick={stopCountup}>Stop Countup</button>
      <button onClick={resetCountup}>Reset Countup</button>
    </div>
  );
}

API

useCountup

function useCountup({
  countStart,
  countStop = Infinity,
  intervalMs = 1000,
}: CountupOptions): [number, CountupControllers];

Implements a count-up functionality.

Parameters

NameTypeDescription
countStartnumberThe starting count value.
intervalMsnumberThe interval in milliseconds at which the count-up updates.
countStopnumberThe count value at which the count-up stops.

Returns

NameTypeDescription
countnumberThe current count value.
controllersCountupControllersAn object containing functions to start, stop, and reset the count-up.

CountupOptions

NameTypeDescription
countStartnumberThe starting count value.
intervalMsnumberThe interval in milliseconds at which the count-up updates.
countStopnumberThe count value at which the count-up stops.

CountupControllers

NameTypeDescription
startCountup() => voidStarts the count-up.
stopCountup() => voidStops the count-up.
resetCountup() => voidResets the count-up to the initial value.

On this page