Intro

Motivation

Installation

Using npm:

$ npm install --save react-native-use-countdown

Using yarn:

$ yarn add react-native-use-countdown

Usage

Import the useCountdown hook:

import { useCountdown } from "use-countdown-hook";

Use the useCountdown hook in your component, passing the initial time in seconds:

const INITIAL_TIME = 60;

const { countdown, isCountdownActive, formattedTime, start, stop, reset } =
  useCountdown(INITIAL_TIME);

API

The useCountdown hook returns an object with the following properties and methods:

• countdown (number): The current remaining time in seconds.
• isCountdownActive (boolean): Indicates if the countdown is currently active.
• formattedTime (string): The current remaining time formatted as hh:mm:ss using the formatTime utility function.
• start (function): Starts the countdown timer.
• stop (function): Stops the countdown timer.
• reset (function): Resets the countdown timer to its initial time.

Example

Here's an example of how to use the useCountdown hook in a simple timer component:

import React from "react";
import { useCountdown } from "react-native-use-countdown";

const Timer = () => {
  const initialTime = 60;
  const { countdown, isCountdownActive, formattedTime, start, stop, reset } =
    useCountdown(initialTime);

  return (
    <div>
      <div>Time remaining: {formattedTime}</div>
      <button onClick={start} disabled={isCountdownActive}>
        Start
      </button>
      <button onClick={stop} disabled={!isCountdownActive}>
        Stop
      </button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Timer;