Alpha Countdown

A customizable React component for displaying countdowns with various options and styling with types.

Installation

npm install alpha-countdown

Demo

Usage

import AlphaCountDown from "alpha-countdown";
import { useEffect, useState } from "react";

export default function Home() {
  const [totalDuration, setTotalDuration] = useState(0);
  const [completed, setCompleted] = useState(false);

  useEffect(() => {
    console.log("🚀 ~ useEffect ~ completed:", completed);
  }, [completed]);

  useEffect(() => {
    console.log("🚀 ~ useEffect ~ totalDuration:", totalDuration);
  }, [totalDuration]);

  function getRemainingDurationinSeconds(remainingDurationinSeconds: number) {
    console.log(
      "🚀 ~ getRemainingDurationinSeconds ~ remainingDurationinSeconds:",
      remainingDurationinSeconds
    );
  }

  function getProgress(progress: number) {
    console.log(
      "🚀 ~ getRemainingDurationinSeconds ~ remainingDurationinSeconds:",
      progress
    );
  }

  return (
    <AlphaCountDown
      getTotalDuration={setTotalDuration}
      getRemainingDuration={getRemainingDurationinSeconds}
      getCompleted={setCompleted}
      getProgress={getProgress}
      reverse={true}
      showLive={true}
      smoothProgress={true}
    />
  );
}

Props

Required Props

endTime

• Type: Date
• Description: The end time for the countdown.

Optional Props

getTotalDuration

• Type: Function
• Description: Callback function to get the total duration.

getRemainingDuration

• Type: Function
• Description: Callback function to get the remaining duration in seconds.

getCompleted

• Type: Function
• Description: Callback function to get the completion status.

getProgress

• Type: Function
• Description: Callback function to get the progress percentage.

onComplete

• Type: String
• Description: The message or action to trigger when the countdown is complete.

reverse

• Type: Boolean
• Default: true
• Description: Reverse the countdown direction.

smoothProgress

• Type: Boolean
• Default: true
• Description: Enable smooth progress animation.

showPercentage

• Type: Boolean
• Default: true
• Description: Show or hide the percentage.

showCountDown

• Type: Boolean
• Default: true
• Description: Show or hide the countdown timer.

showLive

• Type: Boolean
• Default: true
• Description: Show or hide the live countdown updates.

showMilliSeconds

• Type: Boolean
• Default: false
• Description: Show or hide milliseconds.

showOnlyRemainingTime

• Type: Boolean
• Default: false
• Description: Show only the remaining time.

showYears, showMonths, showDays

• Type: Boolean
• Default: true
• Description: Toggle to show years, months, and days.

percantageDecimals

• Type: Number
• Default: 0
• Description: Number of decimal places for the percentage.

timeFormat

• Type: String
• Default: "short"
• Description: Time format options: "short", "long", or false.

customTextBeforePercantage, customTextBeforeTime

• Type: ReactNode
• Description: Custom text or JSX elements to display before the percentage and time.

customOverlayForCompleted, customOverlayForInProgress

• Type: ReactNode
• Description: Custom content to overlay when the countdown is completed or in progress.

dateSeparator

• Type: String
• Default: "space"
• Description: Separator for date elements: "-", ":", "space", or custom string.

containerStyles, progressBarStyles, overlayStyles, onCompleteStyles, inProgressStyles

• Type: CSSProperties
• Description: Custom styles for different components.

containerClassNames, progressBarClassNames, overlayClassNames, onCompleteClassNames, inProgressClassNames

• Type: String
• Description: Custom CSS class names for different components.

Feel free to experiment with these styling options to achieve the desired look and feel for your countdown component. If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

Coding is Love❤️