react-better-countdown-hook

Better React Countdown Hook

Super simple and lightweight countdown timer hook with most of the functionality you would need.

Built with typescript :)

The aim of the library is to remain as small as possible.

Installation

Using npm:

$ npm install --save react-better-countdown-hook

Using yarn:

$ yarn add react-better-countdown-hook

Quick Start/ Example

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import useCountDown from "react-better-countdown-hook";

const App: React.FunctionComponent = () => {
  const [
    { milliseconds, seconds, minutes, hours, days },
    { start, reset, pause },
  ] = useCountDown({
    // Start time in milliseconds
    startTimeMilliseconds: 6000,
    // Decrement to update the timer with
    interval: 500,
    // Callback triggered when the timer reaches 0
    onCountDownEnd: () => {
      console.log("ended");
    },
  });

  return (
    <>
      <div>
        <p>
          Milliseconds: {milliseconds} Second: {seconds} Minute: {minutes}
          Hours: {hours} Days: {days}
          <button onClick={start}>start</button>
          <button onClick={reset}>reset </button>
          <button onClick={pause}>pause</button>
        </p>
      </div>
    </>
  );
};

const MOUNT_NODE = document.getElementById("react-root");
ReactDOM.render(<App />, MOUNT_NODE);

Documentation

const [
  /** Time in milliseconds, seconds, minutes, hours, days */
  { milliseconds, seconds, minutes, hours, days },
  { start, reset, pause },
] = useCountDown({
  // Start time in milliseconds
  startTimeMilliseconds: 6000,
  // Decrement to update the timer with
  interval: 500,
  // Callback triggered when the timer reaches 0
  onCountDownEnd: () => {
    console.log("ended");
  },
});

Configuration

Property	Type	Is Optional	Description
milliseconds	number	true	Current timer value in milliseconds
seconds	number	true	Current timer value in seconds
minutes	number	true	Current timer value in minutes
hours	number	true	Current timer value in hours
days	number	true	Current timer value in days
start	function	true	Function to start the timer
pause	function	true	Function to pause/stop the timer
reset	function	true	Function to pause and then reset the timer
startTimeMilliseconds	number	false	Start time of the timer in milliseconds
interval	number	false	Value to decrement
onCountDownEnd	function	true	Callback to trigger when the timer reaches 0

License

MIT