# @bradgarropy/use-countdown 中文文档 规范地址：https://npmcn.com/package/%40bradgarropy/use-countdown/ 版本：2\.0\.1 npm 元数据更新时间：2023-10-12T02:25:34.100Z 中文译文更新时间：2026-11-08T13:21:29.445Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bradgarropy/use-countdown 原文对照：https://npmcn.com/package/%40bradgarropy/use-countdown/?lang=original 项目主页：https://github.com/bradgarropy/use-countdown 源码仓库：https://github.com/bradgarropy/use-countdown ## 关键信息（来自 npm 元数据） - 包体积（解压后）：26.4 kB，15 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - Node.js 要求：\>=10 - 运行依赖：2 个 - peer 依赖：react \>=16 - 首次发布：2021-01-27T05:57:32.267Z - 最新版本发布：2023-10-12T02:25:33.956Z - 近 30 天下载量：9145（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：24（近 12 个月 0 个） ## 中文简介 使用已解析的钩子 ## 安装 ```sh npm install @bradgarropy/use-countdown ``` 也可以使用：`pnpm add @bradgarropy/use-countdown`、`yarn add @bradgarropy/use-countdown`、`bun add @bradgarropy/use-countdown` ## README # 使用已解析的钩子 [![version](https://img.shields.io/npm/v/@bradgarropy/use-countdown.svg?style=flat-square)](https://www.npmjs.com/package/@bradgarropy/use-countdown) [![downloads](https://img.shields.io/npm/dt/@bradgarropy/use-countdown?style=flat-square)](https://www.npmjs.com/package/@bradgarropy/use-countdown) [![size](https://img.shields.io/bundlephobia/minzip/@bradgarropy/use-countdown?style=flat-square)](https://bundlephobia.com/result?p=@bradgarropy/use-countdown) [![github actions](https://img.shields.io/github/workflow/status/bradgarropy/use-countdown/%F0%9F%9A%80%20release?style=flat-square)](https://github.com/bradgarropy/use-countdown/actions) [![codecov](https://img.shields.io/codecov/c/github/bradgarropy/use-countdown?style=flat-square)](https://app.codecov.io/gh/bradgarropy/use-countdown) [![typescript](https://img.shields.io/npm/types/@bradgarropy/use-countdown?style=flat-square)](https://www.typescriptlang.org/dt/search?search=%40bradgarropy%2Fuse-countdown) [![contributing](https://img.shields.io/badge/PRs-welcome-success?style=flat-square)](https://github.com/bradgarropy/use-countdown/blob/master/contributing.md) [![contributors](https://img.shields.io/github/all-contributors/bradgarropy/use-countdown?style=flat-square)](https://npmcn.com/package/%40bradgarropy/use-countdown/#readme--Contributors) [![discord](https://img.shields.io/discord/748196643140010015?style=flat-square)](https://bradgarropy.com/discord) _[反应](https://reactjs.org/) 钩倒计时器. 正如我所见 [抖动](https://twitch.tv/bradgarropy) 流经._ [![next link](https://npmcn.com/package/%40bradgarropy/use-countdown/images/github.png)](https://www.npmjs.com/package/@bradgarropy/use-countdown) ## \* 安装 此软件包托管于 [无](https://www.npmjs.com/package/@bradgarropy/use-countdown)。 。 。 . ```bash npm install @bradgarropy/use-countdown ``` ## 使用量 在任何反应组件中,导入 `useCountdown`,然后叫它像任何其他 [钩子](https://reactjs.org/docs/hooks-intro.html)返回时 `countdown` 值将随剩余时间而更新. ```typescript import useCountdown from "@bradgarropy/use-countdown" const App = () => { const countdown = useCountdown({ minutes: 1, seconds: 30, format: "mm:ss", autoStart: true, onCompleted: () => console.log("onCompleted"), }) console.log(countdown) // {minutes: 1, seconds: 30, formatted: "01:30", ...} // {minutes: 1, seconds: 29, formatted: "01:29", ...} // {minutes: 1, seconds: 28, formatted: "01:28", ...} // ... // {minutes: 0, seconds: 0, formatted: "00:00", ...} // onCompleted() } ``` ## API 参考 ### `useCountdown({minutes, seconds})` | 名称 | 需求 | 默认 | 示例 | 说明 | | :-- | :-: | :-: | :-- | :-- | | `minutes` | `false` | `0` | `1` | 倒计时分钟. | | `seconds` | `false` | `0` | `30` | 倒计时秒. | | `format` | `false` | `mm:ss` | `mm:ss:SS` | 格式字符串( E)[参考文献](https://date-fns.org/docs/format)) (中文(简体) ). | | `autoStart` | `false` | `false` | `true` | 是否自动开始倒计时 . | | `onCompleted` | `false` | `undefined` | `function` | 倒计时完成后调用函数 . | 根据提供的分数和秒数开始倒计时。 回来的 `countdown` 对象每秒更新一次,计时器打出零时停止. 这个 `format` 参数为 a [`date-fns`](https://date-fns.org/) 格式字符串. 如果提供,则 `onCompleted` 函数将在倒计时完成时调用. 这里有一些例子 如何呼叫 `useCountdown`。 。 。 . ```typescript const countdown = useCountdown({ minutes: 1, seconds: 30, format: "mm:ss:SS", autoStart: true, onCompleted: () => console.log("onCompleted"), }) const countdown = useCountdown({ minutes: 5, onCompleted: () => console.log("onCompleted"), }) const countdown = useCountdown({seconds: 10, format: "mm:ss:SS"}) ``` 返回对象每秒更新一次,直到倒计时器结束. | 名称 | 类型 | 示例 | 说明 | | :-- | :-: | :-: | :-- | | `minutes` | `number` | `1` | 剩下的几分钟. | | `seconds` | `number` | `30` | 剩下的几秒钟. | | `formatted` | `string` | `01:30` | 格式化剩余时间 . | | `isActive` | `boolean` | `true` | 表示倒计时活动,或是运行,或是暂停. | | `isInactive` | `boolean` | `false` | 表示倒计时不活动,并已完成倒计时. | | `isRunning` | `boolean` | `true` | 表示倒计时正在运行. | | `isPaused` | `boolean` | `false` | 表示倒计时暂停. | | `pause` | `function` | `function` | 暂停倒计时. | | `resume` | `function` | `function` | 复次倒计时. | | `reset` | `function` | `function` | 恢复倒计时. | 以下是返回对象的例子. ```typescript { minutes: 1, seconds: 30, formatted: "01:30", isActive: true, isInactive: false, isRunning: true, isPaused: false, pause: () => void, resume: () => void, reset: (time?: Time) => void, } ``` ## 问题 qq 通过文件报告错误 [问题](https://github.com/bradgarropy/use-countdown/issues) 提供反馈 [问题](https://github.com/bradgarropy/use-countdown/issues) 或继续 [推特上说](https://twitter.com/bradgarropy) 用我的来 [阿玛](https://bradgarropy.com/ama) 或者说 [推特上说](https://twitter.com/bradgarropy) 问任何其他问题 ## • 贡献者
Brad Garropy
布拉德・加罗皮
💻 📖 ⚠️ 🚇		Matthew Scholta
马修·肖尔塔
💻 📖		James Q Quick
詹姆斯·克莱克
🤔 📓		Steven Hofheins
史蒂文·霍芬斯
📝 ✅		Jack Reiker
杰克・雷克
🤔 📓		Mehdi Makhloufi
迈赫迪·马赫卢菲
🤔 📓		Daniel Badir
丹尼尔·巴迪尔
🐛 🤔 📓
Florin Cosmin
弗洛林·科斯明
💻		Nick DiMatteo
尼克·迪马特奥
🐛		Jimmy Longley
吉米·龙利
🤔		Nuno Fonseca
努诺·丰塞卡
🤔		Nathan Arthur
内森·亚瑟
🐛		msopacua
苏帕夸
🐛 💻
## 常见问题 ### @bradgarropy/use-countdown 是什么？ 使用已解析的钩子 ### 如何安装 @bradgarropy/use-countdown？ 在项目目录运行 npm install @bradgarropy/use-countdown，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bradgarropy/use-countdown 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bradgarropy/use-countdown 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @bradgarropy/use-countdown 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @bradgarropy/use-countdown 可以商用吗？ @bradgarropy/use-countdown 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @bradgarropy/use-countdown 的下载量有多少？ 根据 npm 官方下载统计，@bradgarropy/use-countdown 在 2026/10/09 – 2026/11/07 这 30 天内被下载 9,145 次，日均约 305 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bradgarropy/use-countdown 还在维护吗？ 最新版本 2\.0\.1 发布于 2023/10/12（3 年前）；至今共发布 24 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/01/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。