倒计时 Countdown

一个基于 react-countdown 构建的倒计时组件。

---

📦 引入方式

import { Countdown } from '@npmqg/react-ui-countdown';

---

🧩 使用示例

📚 基本使用

示例

423天20:23:03

01天03:00:00

源码

<div className="flex flex-col gap-3">
  <Countdown date="2026-12-12 11:11:11" onComplete={() => console.log('完成')} />
  <Countdown date={Date.now() + 1000 * 60 * 60 * 27} onComplete={() => console.log('完成')} />
</div>

📚 自定义渲染

示例

20:23:3:404

源码

<div className="flex flex-col gap-3">
  <Countdown
    intervalDelay={1} // 每 1ms 更新一次
    precision={3} // 精确到毫秒
    date="2026-12-12 11:11:11"
    onComplete={() => console.log('完成')}
    renderer={({ days, hours, minutes, seconds, milliseconds }) => (
      <div className="flex items-center gap-2">
        {hours}
        <span>:</span>
        {minutes}
        <span>:</span>
        {seconds}
        <span>:</span>
        {milliseconds} {/* 毫秒部分 */}
      </div>
    )}
  />
</div>

---

🧩 Props

属性名	类型	默认值	说明
date	number | Date | string	—	倒计时目标时间，可以是时间戳日期字符串或 Date 对象
onComplete	() => void	—	倒计时完成回调
showDays	boolean	true	是否显示天数部分
style	CSSProperties	—	容器自定义内联样式
className	string	—	容器自定义类名
bgColor	string	#000	倒计时数字的背景色
color	string	#fff	倒计时数字的前景色
其他	—	—	react-countdown 其他属性

---

✨ 组件说明

• 内置天、小时、分钟、秒显示。
• 支持自定义数字背景色与字体色。
• 可通过 className 与 style 完全自定义样式。
• 倒计时完成会触发 onComplete 回调。
• 自动补零显示，例如 03:09:05。