@toankhontech/arctimer-core 0.0.0 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# @toankhontech/arctimer-core
|
|
2
|
+
|
|
3
|
+
Platform-agnostic countdown timer engine powering [ArcTimer](https://github.com/toankhontech/arc-timer).
|
|
4
|
+
|
|
5
|
+
This package contains the shared logic, hooks, animation engine, and SVG math used by `@toankhontech/arctimer-react`, `@toankhontech/arctimer-react-native`, and `@toankhontech/arctimer-expo`. It has zero platform-specific dependencies.
|
|
6
|
+
|
|
7
|
+
## When to use this directly
|
|
8
|
+
|
|
9
|
+
Most users should install `@toankhontech/arctimer-react` or `@toankhontech/arctimer-react-native` instead. Use this package only if you're building a custom renderer or need access to the raw timer logic.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @toankhontech/arctimer-core
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## What's inside
|
|
18
|
+
|
|
19
|
+
- **`useCountdown` hook** — state machine + RAF loop + color interpolation + SVG path calculation
|
|
20
|
+
- **Timer state machine** — `idle → playing → paused → completed` with clean transitions
|
|
21
|
+
- **Animation engine** — 7 built-in easings, spring physics (damped harmonic oscillator), bounce and pulse effects
|
|
22
|
+
- **Color interpolation** — smooth RGB-space transitions between any number of colors
|
|
23
|
+
- **SVG path calculation** — circle arc paths, circumference, stroke-dashoffset math
|
|
24
|
+
- **Accessibility utilities** — ARIA labels, live region announcements, reduced motion detection
|
|
25
|
+
- **TypeScript types** — full type exports for `CountdownProps`, `TimerRef`, `RenderInfo`, `Theme`, etc.
|
|
26
|
+
|
|
27
|
+
## Basic Usage
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { useCountdown } from '@toankhontech/arctimer-core'
|
|
31
|
+
|
|
32
|
+
function MyTimer() {
|
|
33
|
+
const {
|
|
34
|
+
path,
|
|
35
|
+
pathLength,
|
|
36
|
+
stroke,
|
|
37
|
+
strokeDashoffset,
|
|
38
|
+
remainingTime,
|
|
39
|
+
color,
|
|
40
|
+
} = useCountdown({
|
|
41
|
+
isPlaying: true,
|
|
42
|
+
duration: 60,
|
|
43
|
+
colors: ['#3498DB', '#E74C3C'],
|
|
44
|
+
colorsTime: [60, 0],
|
|
45
|
+
size: 180,
|
|
46
|
+
strokeWidth: 12,
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
// Render however you want — SVG, Canvas, native views, etc.
|
|
50
|
+
return (
|
|
51
|
+
<svg width={180} height={180}>
|
|
52
|
+
<path d={path} fill="none" stroke="#ddd" strokeWidth={12} />
|
|
53
|
+
<path
|
|
54
|
+
d={path}
|
|
55
|
+
fill="none"
|
|
56
|
+
stroke={stroke}
|
|
57
|
+
strokeWidth={12}
|
|
58
|
+
strokeDasharray={pathLength}
|
|
59
|
+
strokeDashoffset={strokeDashoffset}
|
|
60
|
+
/>
|
|
61
|
+
<text x="90" y="90" textAnchor="middle" fill={color} fontSize="32">
|
|
62
|
+
{remainingTime}
|
|
63
|
+
</text>
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Links
|
|
70
|
+
|
|
71
|
+
- [GitHub](https://github.com/toankhontech/arc-timer)
|
|
72
|
+
- [@toankhontech/arctimer-react](https://www.npmjs.com/package/@toankhontech/arctimer-react) — React web component
|
|
73
|
+
- [@toankhontech/arctimer-react-native](https://www.npmjs.com/package/@toankhontech/arctimer-react-native) — React Native component
|
|
74
|
+
|
|
75
|
+
## License
|
|
76
|
+
|
|
77
|
+
MIT
|