@math-pro/clock

模拟时钟与数字时钟工具，提供 SVG 表盘动画和实时数字显示两种形式。

安装

npm install @math-pro/clock
# or
pnpm add @math-pro/clock

Peer Dependencies: react >= 18, react-dom >= 18

使用

模拟时钟

import { AnalogClock } from '@math-pro/clock'

function App() {
  return (
    <AnalogClock
      config={{ size: 240, showSeconds: true }}
    />
  )
}

数字时钟

import { DigitalClock } from '@math-pro/clock'

function App() {
  return (
    <>
      <DigitalClock format="24h" />
      <DigitalClock format="12h" config={{ showSeconds: false }} />
    </>
  )
}

Hook

import { useClock } from '@math-pro/clock'

function MyComponent() {
  const now = useClock() // 每秒更新的 Date 对象

  return <p>{now.toLocaleTimeString()}</p>
}

API

<AnalogClock />

| Prop | 类型 | 说明 | |------|------|------| | config | ClockConfig | 时钟配置 | | className | string | 自定义 CSS 类名 |

<DigitalClock />

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | format | '24h' \| '12h' | '24h' | 时间格式 | | config | ClockConfig | — | 时钟配置 | | className | string | — | 自定义 CSS 类名 |

ClockConfig

| 字段 | 类型 | 默认值 | 说明 | |------|------|--------|------| | showSeconds | boolean | true | 是否显示秒针 / 秒数 | | size | number | 200 | 模拟时钟 SVG 直径（px） |

useClock()

返回每秒更新的 Date 对象，组件卸载时自动清理定时器。

开发

# 构建
pnpm build

# 监听模式
pnpm build:watch

# 类型检查
pnpm typecheck