@crup/react-timer-hook 0.0.1-alpha.6 โ 0.0.1-alpha.7
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 +42 -63
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @crup/react-timer-hook
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Reliable React timer hooks for countdowns, stopwatches, clocks, polling schedules, and many independent timer lifecycles.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@crup/react-timer-hook?activeTab=versions)
|
|
6
6
|
[](https://www.npmjs.com/package/@crup/react-timer-hook)
|
|
@@ -8,44 +8,45 @@
|
|
|
8
8
|
[](https://github.com/crup/react-timer-hook/actions/workflows/docs.yml)
|
|
9
9
|
[](https://github.com/crup/react-timer-hook/actions/workflows/size.yml)
|
|
10
10
|
[](./LICENSE)
|
|
11
|
-
[](
|
|
11
|
+
[](https://www.npmjs.com/package/@crup/react-timer-hook)
|
|
12
|
+
[](https://react.dev/)
|
|
12
13
|
|
|
13
|
-
๐ Docs: https://crup.github.io/react-timer-hook/
|
|
14
|
+
๐ Docs and live examples: https://crup.github.io/react-timer-hook/
|
|
14
15
|
|
|
15
|
-
##
|
|
16
|
+
## Why this exists
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
Timer hooks look simple until real apps need pause/resume semantics, Strict Mode cleanup, async callbacks, polling that does not overlap, and lists with dozens of independent timers.
|
|
18
19
|
|
|
19
|
-
-
|
|
20
|
-
- Intermediate: once-only `onEnd`, polling, poll-and-cancel, backend events, debug logs
|
|
21
|
-
- Advanced: many display timers, timer groups, global controls, per-item polling, dynamic items
|
|
20
|
+
`@crup/react-timer-hook` keeps the API small and lets your app decide what time means:
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
## Why it is different
|
|
26
|
-
|
|
27
|
-
Most timer libraries mix scheduling, lifecycle, formatting, and app behavior. This package keeps the core small:
|
|
28
|
-
|
|
29
|
-
- โฑ๏ธ `useTimer()` for one lifecycle.
|
|
22
|
+
- โฑ๏ธ `useTimer()` for one lifecycle: stopwatch, countdown, clock, schedule, or custom flow.
|
|
30
23
|
- ๐งญ `useTimerGroup()` for many keyed lifecycles with one shared scheduler.
|
|
31
|
-
- ๐งฉ `durationParts()` for display
|
|
32
|
-
- ๐งผ No timezone,
|
|
33
|
-
- ๐งช Built
|
|
34
|
-
- ๐ค
|
|
24
|
+
- ๐งฉ `durationParts()` for display math without locale or timezone opinions.
|
|
25
|
+
- ๐งผ No formatting, timezone, audio, retry, cache, or data-fetching policy baked in.
|
|
26
|
+
- ๐งช Built for rerenders, Strict Mode, async callbacks, cleanup, and many timers.
|
|
27
|
+
- ๐ค Agent-friendly docs through hosted `llms.txt`, `llms-full.txt`, and an optional MCP docs helper.
|
|
35
28
|
|
|
36
29
|
## Install
|
|
37
30
|
|
|
38
|
-
|
|
31
|
+
The project is currently in alpha while the API receives feedback.
|
|
39
32
|
|
|
40
33
|
```sh
|
|
41
34
|
npm install @crup/react-timer-hook@alpha
|
|
42
35
|
pnpm add @crup/react-timer-hook@alpha
|
|
43
36
|
```
|
|
44
37
|
|
|
45
|
-
```
|
|
38
|
+
```tsx
|
|
46
39
|
import { durationParts, useTimer, useTimerGroup } from '@crup/react-timer-hook';
|
|
47
40
|
```
|
|
48
41
|
|
|
42
|
+
## Live recipes
|
|
43
|
+
|
|
44
|
+
Each recipe has a live playground and a focused code sample:
|
|
45
|
+
|
|
46
|
+
- Basic: [wall clock](https://crup.github.io/react-timer-hook/recipes/basic/wall-clock/), [stopwatch](https://crup.github.io/react-timer-hook/recipes/basic/stopwatch/), [absolute countdown](https://crup.github.io/react-timer-hook/recipes/basic/absolute-countdown/), [pausable countdown](https://crup.github.io/react-timer-hook/recipes/basic/pausable-countdown/), [manual controls](https://crup.github.io/react-timer-hook/recipes/basic/manual-controls/)
|
|
47
|
+
- Intermediate: [once-only onEnd](https://crup.github.io/react-timer-hook/recipes/intermediate/once-only-on-end/), [polling schedule](https://crup.github.io/react-timer-hook/recipes/intermediate/polling-schedule/), [poll and cancel](https://crup.github.io/react-timer-hook/recipes/intermediate/poll-and-cancel/), [backend event stop](https://crup.github.io/react-timer-hook/recipes/intermediate/backend-event-stop/), [debug logs](https://crup.github.io/react-timer-hook/recipes/intermediate/debug-logs/)
|
|
48
|
+
- Advanced: [many display countdowns](https://crup.github.io/react-timer-hook/recipes/advanced/many-display-countdowns/), [timer group](https://crup.github.io/react-timer-hook/recipes/advanced/timer-group/), [group controls](https://crup.github.io/react-timer-hook/recipes/advanced/group-controls/), [per-item polling](https://crup.github.io/react-timer-hook/recipes/advanced/per-item-polling/), [dynamic items](https://crup.github.io/react-timer-hook/recipes/advanced/dynamic-items/)
|
|
49
|
+
|
|
49
50
|
## Quick examples
|
|
50
51
|
|
|
51
52
|
### Stopwatch
|
|
@@ -58,17 +59,17 @@ export function Stopwatch() {
|
|
|
58
59
|
|
|
59
60
|
return (
|
|
60
61
|
<>
|
|
61
|
-
<output>{
|
|
62
|
-
<button onClick={timer.start}>Start</button>
|
|
63
|
-
<button onClick={timer.pause}>Pause</button>
|
|
64
|
-
<button onClick={timer.resume}>Resume</button>
|
|
62
|
+
<output>{(timer.elapsedMilliseconds / 1000).toFixed(1)}s</output>
|
|
63
|
+
<button disabled={!timer.isIdle} onClick={timer.start}>Start</button>
|
|
64
|
+
<button disabled={!timer.isRunning} onClick={timer.pause}>Pause</button>
|
|
65
|
+
<button disabled={!timer.isPaused} onClick={timer.resume}>Resume</button>
|
|
65
66
|
<button onClick={timer.restart}>Restart</button>
|
|
66
67
|
</>
|
|
67
68
|
);
|
|
68
69
|
}
|
|
69
70
|
```
|
|
70
71
|
|
|
71
|
-
###
|
|
72
|
+
### Auction countdown
|
|
72
73
|
|
|
73
74
|
Use `now` for wall-clock deadlines from a server, auction, reservation, or job expiry.
|
|
74
75
|
|
|
@@ -93,7 +94,7 @@ export function AuctionTimer({ auctionId, expiresAt }: {
|
|
|
93
94
|
}
|
|
94
95
|
```
|
|
95
96
|
|
|
96
|
-
###
|
|
97
|
+
### Poll and cancel early
|
|
97
98
|
|
|
98
99
|
Schedules run while the timer is active. Slow async work is skipped by default with `overlap: 'skip'`.
|
|
99
100
|
|
|
@@ -134,7 +135,7 @@ const timers = useTimerGroup({
|
|
|
134
135
|
|
|
135
136
|
## Bundle size
|
|
136
137
|
|
|
137
|
-
Current
|
|
138
|
+
Current build:
|
|
138
139
|
|
|
139
140
|
| File | Raw | Gzip | Brotli |
|
|
140
141
|
| --- | ---: | ---: | ---: |
|
|
@@ -142,21 +143,16 @@ Current local build:
|
|
|
142
143
|
| `dist/index.cjs` | 12.94 kB | 3.79 kB | 3.42 kB |
|
|
143
144
|
| `dist/index.d.ts` | 3.95 kB | 992 B | 888 B |
|
|
144
145
|
|
|
145
|
-
CI writes a size summary to the GitHub Actions UI and posts
|
|
146
|
+
CI writes a size summary to the GitHub Actions UI and posts bundle-size reports on pull requests.
|
|
146
147
|
|
|
147
|
-
## AI-friendly
|
|
148
|
+
## AI-friendly docs
|
|
148
149
|
|
|
149
|
-
|
|
150
|
+
Agents and docs-aware IDEs can use:
|
|
150
151
|
|
|
151
|
-
|
|
152
|
+
- https://crup.github.io/react-timer-hook/llms.txt
|
|
153
|
+
- https://crup.github.io/react-timer-hook/llms-full.txt
|
|
152
154
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
```sh
|
|
156
|
-
git clone https://github.com/crup/react-timer-hook.git
|
|
157
|
-
cd react-timer-hook
|
|
158
|
-
pnpm install
|
|
159
|
-
```
|
|
155
|
+
Optional local MCP docs server:
|
|
160
156
|
|
|
161
157
|
```json
|
|
162
158
|
{
|
|
@@ -169,7 +165,7 @@ pnpm install
|
|
|
169
165
|
}
|
|
170
166
|
```
|
|
171
167
|
|
|
172
|
-
|
|
168
|
+
It exposes:
|
|
173
169
|
|
|
174
170
|
```txt
|
|
175
171
|
react-timer-hook://package
|
|
@@ -177,29 +173,12 @@ react-timer-hook://api
|
|
|
177
173
|
react-timer-hook://recipes
|
|
178
174
|
```
|
|
179
175
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
- https://crup.github.io/react-timer-hook/llms.txt
|
|
183
|
-
- https://crup.github.io/react-timer-hook/llms-full.txt
|
|
184
|
-
|
|
185
|
-
Local MCP/docs helpers:
|
|
186
|
-
|
|
187
|
-
```sh
|
|
188
|
-
pnpm ai:context
|
|
189
|
-
pnpm mcp:docs
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
The MCP utility is repo-local and excluded from the published npm package.
|
|
193
|
-
|
|
194
|
-
## Release policy
|
|
176
|
+
## Contributing
|
|
195
177
|
|
|
196
|
-
|
|
197
|
-
- `@alpha` is the documented install tag right now.
|
|
198
|
-
- Npm requires a `latest` dist-tag, so the workflow keeps `latest` pointing at the current alpha until stable publishing is unlocked.
|
|
178
|
+
Issues, recipes, docs improvements, and focused bug reports are welcome.
|
|
199
179
|
|
|
200
|
-
|
|
180
|
+
- Read the docs: https://crup.github.io/react-timer-hook/
|
|
181
|
+
- Open an issue: https://github.com/crup/react-timer-hook/issues
|
|
182
|
+
- See the contributing guide: ./CONTRIBUTING.md
|
|
201
183
|
|
|
202
|
-
|
|
203
|
-
- ๐ฆ npm: https://www.npmjs.com/package/@crup/react-timer-hook
|
|
204
|
-
- ๐งต Issues: https://github.com/crup/react-timer-hook/issues
|
|
205
|
-
- ๐ค Contributing: ./CONTRIBUTING.md
|
|
184
|
+
The package targets Node 24 for development and React 18+ as a peer dependency.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crup/react-timer-hook",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.0.1-alpha.7",
|
|
4
|
+
"description": "Reliable React timer lifecycle hooks for countdowns, stopwatches, schedules, and many independent timers.",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|