Countdown

Display a countdown to a target date.

Usage

tsx

import { Countdown } from "fromsrc/client";

<Countdown target={new Date("2026-12-31")} />;

Accepts multiple formats:

tsx

<Countdown target={new Date("2026-12-31")} />

<Countdown target="2026-12-31T00:00:00" />

<Countdown target={1767225600000} />

Single line display:

tsx

<Countdown target={new Date("2026-12-31")} format="compact" />

Default format with labeled segments:

tsx

<Countdown target={new Date("2026-12-31")} format="full" />

Run code when countdown reaches zero:

tsx

<Countdown
  target={new Date("2026-12-31")}
  onComplete={() => console.log("happy new year!")}
/>

prop	type	default	description
target	Date \| string \| number	required	Target date
format	"full" \| "compact"	"full"	Display format
onComplete	() => void	-	Callback at zero

Display a countdown to a target date.

tsx

import { Countdown } from "fromsrc/client";

<Countdown target={new Date("2026-12-31")} />;

Accepts multiple formats:

tsx

<Countdown target={new Date("2026-12-31")} />

<Countdown target="2026-12-31T00:00:00" />

<Countdown target={1767225600000} />

Single line display:

tsx

<Countdown target={new Date("2026-12-31")} format="compact" />

Default format with labeled segments:

tsx

<Countdown target={new Date("2026-12-31")} format="full" />

Run code when countdown reaches zero:

tsx

<Countdown
  target={new Date("2026-12-31")}
  onComplete={() => console.log("happy new year!")}
/>

prop	type	default	description
target	Date \| string \| number	required	Target date
format	"full" \| "compact"	"full"	Display format
onComplete	() => void	-	Callback at zero