react-awesome-countdowntimer/dist/index.js

An awesome lightweight countdown timer for React with custom renderer, callbacks, and zero dependencies.

import { forwardRef as e, useEffect as t, useImperativeHandle as n, useMemo as r, useRef as i, useState as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/index.jsx
var c = e(({ endDate: e, timerClassName: c = "", sectionClassName: l = "", timeClassName: u = "", labelClassName: d = "", timerStyle: f, sectionStyle: p, timeStyle: m, labelStyle: h, renderer: g, children: _, onComplete: v, onTick: y, onStart: b, onPause: x, onStop: S, onMount: C, autoStart: w = !0, zeroPadTime: T = 2, overtime: E = !1, daysInHours: D = !1 }, O) => {
	let [k, A] = a({
		months: "",
		days: "",
		hours: "",
		minutes: "",
		seconds: ""
	}), [j, M] = a(!1), [N, P] = a(w), [F, I] = a(!1), [L, R] = a(!w), z = i(!1), B = i(null), V = i(0), H = i(null), U = i(!1);
	t(() => {
		if (!U.current && C) {
			U.current = !0;
			let t = /* @__PURE__ */ new Date(), n = e instanceof Date ? e.getTime() - t.getTime() : 0;
			C({
				total: Math.max(0, n),
				completed: n <= 0
			});
		}
	}, [C, e]), t(() => {
		let t = () => {
			if (!(e instanceof Date) || isNaN(e.getTime())) {
				console.warn("CountdownTimer: endDate must be a valid Date object");
				return;
			}
			let t = /* @__PURE__ */ new Date(), n = e.getTime() - t.getTime();
			if (n < 0 && !E) {
				let e = z.current;
				A({
					months: "",
					days: "",
					hours: "",
					minutes: "",
					seconds: ""
				}), M(!0), z.current = !0, P(!1), !e && v && v({
					total: 0,
					days: 0,
					hours: 0,
					minutes: 0,
					seconds: 0,
					completed: !0
				});
				return;
			}
			let r = Math.floor(Math.abs(n) / 1e3), i = Math.floor(r / 60), a = Math.floor(i / 60), o = Math.floor(a / 24), s = Math.floor(o / 30), c, l;
			D ? (c = 0, l = a) : (c = o % 30, l = a % 24);
			let u = i % 60, d = r % 60, f = (e) => String(e).padStart(T, "0"), p = E && n < 0 ? "-" : "";
			A({
				months: s > 0 ? p + f(s) : "",
				days: !D && o > 0 ? p + f(c) : "",
				hours: (D ? a : a % 24) > 0 ? p + f(l) : "",
				minutes: i > 0 ? p + f(u) : "",
				seconds: r > 0 ? p + f(d) : ""
			}), M(n < 0 && !E), y && y({
				total: n,
				days: o,
				hours: a,
				minutes: i,
				seconds: r,
				completed: !1
			});
		};
		if (N) return t(), B.current = setInterval(t, 1e3), () => {
			B.current &&= (clearInterval(B.current), null);
		};
	}, [
		e,
		v,
		y,
		N,
		T,
		E,
		D
	]), n(O, () => ({
		start: () => {
			N || (P(!0), I(!1), R(!1), H.current &&= (V.current += Date.now() - H.current, null), b && b({
				total: Math.max(0, e?.getTime() - (/* @__PURE__ */ new Date()).getTime()),
				completed: j
			}));
		},
		pause: () => {
			!N || F || (P(!1), I(!0), H.current = Date.now(), x && x({
				total: Math.max(0, e?.getTime() - (/* @__PURE__ */ new Date()).getTime()),
				completed: j
			}));
		},
		stop: () => {
			L || (P(!1), I(!1), R(!0), V.current = 0, H.current = null, S && S({
				total: Math.max(0, e?.getTime() - (/* @__PURE__ */ new Date()).getTime()),
				completed: j
			}));
		},
		isPaused: () => F,
		isStopped: () => L,
		isCompleted: () => j
	}), [
		N,
		F,
		L,
		j,
		e,
		b,
		x,
		S
	]);
	let W = r(() => `react-countdown-timer ${c}`.trim(), [c]), G = r(() => `react-countdown-section ${l}`.trim(), [l]), K = r(() => `react-countdown-time ${u}`.trim(), [u]), q = r(() => `react-countdown-label ${d}`.trim(), [d]), J = (e, t, n) => e ? /* @__PURE__ */ s("div", {
		className: `${G} ${n}`,
		style: p,
		children: [/* @__PURE__ */ o("div", {
			className: K,
			style: m,
			children: e
		}), /* @__PURE__ */ o("div", {
			className: q,
			style: h,
			children: t
		})]
	}) : null, Y = r(() => {
		let t = (e) => e ? parseInt(e, 10) : 0;
		return {
			total: j ? 0 : Math.max(0, e?.getTime() - (/* @__PURE__ */ new Date()).getTime()),
			days: t(k.days),
			hours: t(k.hours),
			minutes: t(k.minutes),
			seconds: t(k.seconds),
			completed: j,
			formatted: {
				days: k.days,
				hours: k.hours,
				minutes: k.minutes,
				seconds: k.seconds
			}
		};
	}, [
		k,
		j,
		e
	]);
	return j && _ ? _ : g ? g(Y) : /* @__PURE__ */ s("div", {
		className: W,
		style: f,
		children: [
			J(k.months, "Months", "months"),
			J(k.days, "Days", "days"),
			J(k.hours, "Hours", "hours"),
			J(k.minutes, "Minutes", "minutes"),
			J(k.seconds, "Seconds", "seconds")
		]
	});
});
c.displayName = "CountdownTimer";
//#endregion
export { c as default };