# rc-countdown-view

> A simple countdown react component.

Latest version **3.0.1** (published 2025-12-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-countdown-view
pnpm add rc-countdown-view
yarn add rc-countdown-view
bun add rc-countdown-view
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2025-12-05 |
| First published | 2020-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | caijf |
| Maintainers | caijf |
| Keywords | countdown, react, component |

## Links

- npm: https://www.npmjs.com/package/rc-countdown-view
- Repository: https://github.com/caijf/rc-countdown-view
- Homepage: https://github.com/caijf/rc-countdown-view#readme
- Issues: https://github.com/caijf/rc-countdown-view/issues
- npm.io page: https://npm.io/package/rc-countdown-view

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [rc-hooks](https://npm.io/package/rc-hooks.md) ^3.2.0
- [countdown-pro](https://npm.io/package/countdown-pro.md) ^2.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2025-12-05
- 3.0.0 — 2025-01-23
- 2.1.0 — 2024-07-18
- 2.0.2 — 2024-07-15
- 2.0.1 — 2023-05-15
- 2.0.0 — 2022-09-10
- 1.2.1 — 2021-05-11
- 1.2.0 — 2020-09-30
- 1.1.0 — 2020-05-18
- 1.0.1 — 2020-05-17
- 1.0.0 — 2020-05-17
- 0.0.0 — 2020-05-17

## README

# rc-countdown-view

[![npm][npm]][npm-url] ![GitHub](https://img.shields.io/github/license/caijf/rc-countdown-view.svg)

一个简单的 `React` 倒计时组件。

[查看示例][site]

## 安装

```shell
npm install rc-countdown-view
```

```shell
yarn add rc-countdown-view
```

```shell
pnpm add rc-countdown-view
```

## 示例

```javascript
import CountDown from 'rc-countdown-view';

export default () => {
  return <CountDown time={10 * 60 * 60 * 1000} />;
};
```

## API

除了以下属性，还支持 `span` 标签的其他属性。

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| time | 倒计时，单位毫秒 | `number` | `0` |
| interval | 时间间隔，单位毫秒 | `number` | `1000` |
| format | 格式化。<br/>如果传入 `string` 将自动转换 `DD-日，HH-时，mm-分，ss-秒，SSS-毫秒` 。<br/>如果传入 `function`，必须要有返回值 `string` 且不会自动转换。 | `string \| (timestamp: number, formatRes: { days: number, hours: number, minutes: number, seconds: number, milliseconds: number }) => void` | `HH:mm:ss` |
| autoStart | 自动开始 | `boolean` | `true` |
| onChange | 时间变化时触发，参数是 `format` 的返回值。 | `(formatTime: string) => void` | - |
| onEnd | 倒计时结束时触发 | `() => void` | - |
| actionRef | 常用操作，开始/暂停/重置 | `MutableRefObject<ActionType>` | - |

[site]: https://caijf.github.io/rc-countdown-view/
[npm]: https://img.shields.io/npm/v/rc-countdown-view.svg
[npm-url]: https://npmjs.com/package/rc-countdown-view

---
_Source: https://npm.io/package/rc-countdown-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._