Abhishek Countdown Timer

A simple and customizable countdown timer component for React. This component is designed to provide a straightforward way to add a countdown timer to your React application, with easy customization options.

Table of Contents

• Installation
• Usage
• Props
• Methods
• Customization
• Events
• Examples
• Contributing
• License

Installation

To install the package, use npm:

npm install abhishek-countdown-timer

Or with Yarn:

bash

yarn add abhishek-countdown-timer

Usage

Here's a basic example of how to use the abhishek-countdown-timer in your React project:

jsx

import React from 'react';
import CountdownTimer from 'abhishek-countdown-timer';

const App = () => {
  return (
    <div>
      <h1>Countdown Timer</h1>
      <CountdownTimer
        endTime="2024-12-31T23:59:59"
        onComplete={() => alert('Time is up!')}
      />
    </div>
  );
};

export default App;

Props

The CountdownTimer component accepts the following props:
Prop	Type	Default	Description
endTime	string	required	The end time for the countdown (ISO 8601 format)
onComplete	function	null	Callback function when the countdown is complete
format	string	"HH:mm:ss"	The format of the countdown display (e.g., "DD:HH:mm
")
style	object	{}	Custom styles for the countdown timer
className	string	""	Custom class name for the countdown timer
interval	number	1000	The update interval in milliseconds (default is 1 second)
Methods

The CountdownTimer component provides the following methods:

    start(): Starts the countdown.
    pause(): Pauses the countdown.
    reset(): Resets the countdown to the initial end time.

Customization

You can customize the appearance of the countdown timer using the style and className props. For example:

jsx

<CountdownTimer
  endTime="2024-12-31T23:59:59"
  style={{ color: 'blue', fontSize: '20px', backgroundColor: 'yellow' }}
  className="my-custom-timer"
/>

Events

The CountdownTimer component supports various events:

    onComplete: Triggered when the countdown reaches zero.
    onTick: Triggered on each tick of the countdown (each interval).

jsx

<CountdownTimer
  endTime="2024-12-31T23:59:59"
  onComplete={() => console.log('Countdown complete!')}
  onTick={() => console.log('Tick')}
/>

Examples
Basic Countdown

jsx

import React from 'react';
import CountdownTimer from 'abhishek-countdown-timer';

const App = () => {
  return (
    <div>
      <h1>Basic Countdown Timer</h1>
      <CountdownTimer endTime="2024-12-31T23:59:59" />
    </div>
  );
};

export default App;

Customized Countdown

jsx

import React from 'react';
import CountdownTimer from 'abhishek-countdown-timer';

const App = () => {
  return (
    <div>
      <h1>Customized Countdown Timer</h1>
      <CountdownTimer
        endTime="2024-12-31T23:59:59"
        format="DD:HH:mm:ss"
        style={{ color: 'red', fontSize: '2em' }}
        onComplete={() => alert('Happy New Year!')}
      />
    </div>
  );
};

export default App;

Countdown with Methods

jsx

import React, { useRef } from 'react';
import CountdownTimer from 'abhishek-countdown-timer';

const App = () => {
  const timerRef = useRef(null);

  const handleStart = () => {
    timerRef.current.start();
  };

  const handlePause = () => {
    timerRef.current.pause();
  };

  const handleReset = () => {
    timerRef.current.reset();
  };

  return (
    <div>
      <h1>Countdown Timer with Methods</h1>
      <CountdownTimer
        ref={timerRef}
        endTime="2024-12-31T23:59:59"
      />
      <button onClick={handleStart}>Start</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default App;

Contributing

Contributions are welcome! Please follow these steps to contribute:

    Fork the repository.
    Create a new branch: git checkout -b feature/my-new-feature.
    Commit your changes: git commit -am 'Add some feature'.
    Push to the branch: git push origin feature/my-new-feature.
    Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

go


This detailed `README.md` includes sections for installation, usage, props, methods, customization, events, examples, contributing, and licensing. Adjust the content based on the actual features and requirements of the `abhishek-countdown-timer` package.