Welcome to use-remaining-time 👋

React hook that returns remaining time in hh:mm:ss format

Install

npm i use-remaining-time

Example

const Timer = () => {
  const hourCountdown = 60 * 60;
  const { timeString, secondsRemaining, isPaused, resetTimer, setIsPaused } =
    useRemainingTime(hourCountdown, false, () =>
      console.log("Countdown finished")
    );
  return (
    <div>
      <h1>Countdown: {timeString}</h1>
      <button onClick={resetTimer}>Reset countdown</button>
      <button onClick={() => setIsPaused(true)}>Pause countdown</button>
    </div>
  );
};

Configuration

Hook takes folowing options

| Name | Type | Description | | ---------------- | --------- | ------------------------------------------------------- | | initialSeconds | Number | Start of timer in second | | initialPaused | Boolean | Initial pause state | | onComplete | Function? | Callback when timer hits 0 seconds remaining (optional) |

Properties

Hook returns following properties:

| Name | Type | Description | | ------------------ | -------- | --------------------------------------------------------------------------- | | timeString | String | Time remaining in hh:mm:ss format | | secondsRemaining | Number | The time remaining in seconds | | isPaused | Boolean | Whether the timer is currently ticking down | | setIsPaused | Function | Function to pause or resume timer. Requires boolean parameter | | resetTimer | Function | A function to reset timer to initialSeconds accepts boolean parameter . |

Show your support

Give a ⭐️ if this project helped you!