Alpha Countdown Demo

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

Links

Simple...

import { AlphaCountDown } from "alpha-countdown";

     <AlphaCountDown 
    endTime={new Date(new Date().setMinutes(new Date().getMinutes() + 30))
    }/>

Steps...

  <AlphaCountDown
        endTime={
          new Date(new Date().setSeconds(new Date().getSeconds() + 100))
        }
        smoothProgress={false}
        percantageDecimals={2}
        showCountDown={true}
        showPercantage={true}
        showMilliSeconds={false}
        showOnlyRemainingTime={false}
        showYears={true}
        showMonths={true}
        showDays={true}
        reverse={true}
        progressBarStyles={{
          background: "#0A174E",
          color: "white !important",
        }}
        containerStyles={{
          background: "#F5D042",
        }}
        onComplete="Hello, Time Up bro"
        timeFormat="long"
        dateSeperator="space"
      />

Smooth...

  <AlphaCountDown
          endTime={
            new Date(new Date().setMinutes(new Date().getMinutes() + 30))
          }
          percantageDecimals={2}
          showMilliSeconds={true}
          reverse={true}
          timeFormat={false}
          dateSeperator=": "
          showOnlyRemainingTime={false}
          showYears={true}
          showMonths={true}
          showDays={true}
          progressBarStyles={{
            background: "#02343F",
          }}
          containerStyles={{
            background: "#F0EDCC",
          }}
        />

Add text before...

<AlphaCountDown
        endTime={
          new Date(new Date().setMinutes(new Date().getMinutes() + 30))
        }
        percantageDecimals={2}
        showMilliSeconds={true}
        // reverse={false}
        timeFormat="long"
        progressBarStyles={{
          background: "#CED46A",
        }}
        containerStyles={{
          background: "#07553B",
        }}
        showOnlyRemainingTime={true}
        customTextBeforePercantage={<>Remaining Percentage </>}
        customTextBeforeTime={<>Remaining Time</>}
      />

Keep it clean...

      <AlphaCountDown
          endTime={
            new Date(new Date().setMinutes(new Date().getMinutes() + 30))
          }
          showMilliSeconds={true}
          reverse={true}
          timeFormat={false}
          showCountDown={false}
          showLive={false}
          showPercantage={false}
          progressBarStyles={{
            background: "#DCE2F0",
          }}
          containerStyles={{
            background: "#50586C",
          }}
        />

Add InProgress Styles...

<AlphaCountDown
          endTime={
            new Date(new Date().setMinutes(new Date().getMinutes() + 30))
          }
          showMilliSeconds={true}
          reverse={true}
          timeFormat={false}
          showCountDown={false}
          showLive={false}
          showPercantage={false}
          inProgressStyles={{
            width: "100%",
            color: "black",
            display: "flex",
            justifyContent: "center",
          }}
          customOverlayForInProgress={<div>Add anything with React Node</div>}
        />

Customize Completed Styles...

  <AlphaCountDown
          endTime={
            new Date(new Date().setSeconds(new Date().getSeconds() + 10))
          }
          showMilliSeconds={true}
          reverse={true}
          timeFormat={false}
          showCountDown={false}
          showLive={false}
          showPercantage={false}
          overlayStyles={{
            width: "100%",
            color: "black",
            display: "flex",
            justifyContent: "center",
            background: "Red",
          }}
          customOverlayForCompleted={
            <div
              style={{ color: "white", fontSize: "25px", fontWeight: "700" }}
            >
              Boom!
            </div>
          }
        />

Yes, Tailwind works...

    <AlphaCountDown
            endTime={
              new Date(new Date().setMinutes(new Date().getMinutes() + 30))
            }
            showMilliSeconds={true}
            reverse={true}
            timeFormat={false}
            showCountDown={false}
            showLive={false}
            showPercantage={true}
            onCompleteClassNames="!text-red-100 !bg-blue-900 font-bold rounded-md"
            containerClassNames="!h-[50px] !w-[80%] !bg-white"
            progressBarClassNames="!bg-purple-800"
          />

Get Data...

      
    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(
        "🚀 ~ getProgress ~ progress:",
        progress
      );
    }
    <>
        <span>Total Duration in secs : {totalDuration}</span>
        <span>Completed : {completed}</span>
        <span>Progress : check console</span>
        <span>Duration in Seconds : check console</span>
        <AlphaCountDown
              endTime={
                new Date(new Date().setMinutes(new Date().getMinutes() + 30))
              }
              getTotalDuration={setTotalDuration}
              getRemainingDuration={getRemainingDurationinSeconds}
              getCompleted={setCompleted}
              getProgress={getProgress}
              showMilliSeconds={true}
              reverse={true}
              timeFormat={false}
              showCountDown={false}
              showLive={false}
              showPercantage={true}
              containerClassNames="!h-[10px] !bg-[#F9EBDE]"
              progressBarClassNames="!bg-[#815854]"
    />
    </>

Total Duration in secs : 0Completed : falseProgress : check consoleDuration in Seconds : check console