React JS Countdown Helper

The react_js_countdown_helper package is a collection of React hooks and components designed to simplify the implementation of countdown timers in React applications. With this package, you can easily create countdown timers that display the time remaining until a specified date or deadline. Features

- Customizable Countdown Timer: Create countdown timers with customizable formats and intervals.
- Pause and Resume Functionality: Pause and resume countdown timers as needed.
- Time Zone Conversion: Convert countdown timers to different time zones with ease.
- Flexible and Lightweight: Simple API for easy integration into React applications.

Installation

You can install the react_js_countdown_helper package via npm or yarn:

npm install react_js_countdown_helper

or

yarn add react_js_countdown_helper

Usage

Countdown Timer Hook

The useCountDownTarget hook allows you to create countdown timers in your components. Here's an example of how to use it:

import React from 'react';
import { useCountDownTarget } from 'react_js_countdown_helper';

const MyComponent = () => {
  const deadline = new Date('2022-12-31T23:59:59');
  const [seconds, minutes, hours, days] = useCountDownTarget(deadline);

  return (
    <div>
      <p>Time Left:</p>
      <p>{days} Days</p>
      <p>{hours} Hours</p>
      <p>{minutes} Minutes</p>
      <p>{seconds} Seconds</p>
    </div>
  );
};

Countdown Timer Component

The CountdownTimer component provides a pre-styled countdown timer that you can easily integrate into your React application. Here's an example:

import React from 'react';
import { CountdownTimer } from 'react_js_countdown_helper';

const MyComponent = () => {
  return (
    <div>
      <CountdownTimer deadline={new Date('2022-12-31T23:59:59')} />
    </div>
  );
};

Or if you need to use your own styles, you can always use a hook.

const [seconds, minutes, hours, days] = useCountdownTarget(TargetDate, true);

Documentation

Countdown Timer Hook

The useCountDownTarget hook is the core functionality of the react_js_countdown_helper package. It allows you to create countdown timers in your components. Here's how it works:

• Inputs: It takes several parameters:

  • date: The target date or deadline for the countdown timer.
  • overflowValues (optional): A boolean flag indicating whether to display overflow values for days and hours. Default is false.
  • intervalTimer (optional): The interval at which the countdown timer updates, in milliseconds. Default is 1000 (1 second).
  • ref (optional): A React mutable ref object that can be used to pause and resume the countdown timer.

• Outputs: It returns an array containing the time remaining until the target date, broken down into seconds, minutes, hours, and days.

Here's an example of how to use it:

import React from 'react';
import { useCountDownTarget } from 'react_js_countdown_helper';

const MyComponent = () => {
  const deadline = new Date('2022-12-31T23:59:59');
  const [seconds, minutes, hours, days] = useCountDownTarget(deadline);

  return (
    <div>
      <p>Time Left:</p>
      <p>{days} Days</p>
      <p>{hours} Hours</p>
      <p>{minutes} Minutes</p>
      <p>{seconds} Seconds</p>
    </div>
  );
};

Countdown Timer Component

The CountdownTimer component provides a pre-styled countdown timer that you can easily integrate into your React application. It internally uses the useCountDownTarget hook to manage the countdown logic. Here's how to use it:

Props: It accepts the following props:
    deadline: The target date or deadline for the countdown timer.

Here's an example of how to use it:

import React from 'react';
import { CountdownTimer } from 'react_js_countdown_helper';

const MyComponent = () => {
  return (
    <div>
      <CountdownTimer deadline={new Date('2022-12-31T23:59:59')} />
    </div>
  );
};

Contributing

Contributions are welcome! If you have any ideas, bug fixes, or enhancements, please submit a pull request or open an issue on GitHub. License

This package is open source and available under the MIT License.