/useCountdown

React custom hook for providing a countdown

Primary LanguageJavaScriptMIT LicenseMIT

useCountdown

React custom hook for providing a countdown

Codepen

Usage

Import the script file:

import useCountdown from '[...]';

Call it inside your function component:

const {
  countdown,
  secondsLeft,
  running,
  startCountdown,
  stopCountdown,
  resumeCountdown,
  restartCountdown,
} = useCountdown(60);

When invoking the function, you must pass a number as argument. This is the quantity of seconds of your countdown. You can also pass a boolean as second argument in order to say if the countdown must start on mounting (defaults to true).

It will return the following:

  • countdown: an array: [hours, minutes, seconds];
  • secondsLeft: how much time (seconds) there are yet, before countdown is over;
  • running: if the countdown is currently running;
  • stopCountdown: stop the countdown from running;
  • startCountdown: start the countdown (but remember: it will be automatically initialized when rendering the component);
  • resumeCountdown: resume the countdown, starting on the time it has stopped;
  • restartCountdown: stop and start countdown.

Enjoy with coffee.