@usefy/use-timer 0.0.26 → 0.0.28
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 +27 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -97,7 +97,7 @@ function Timer() {
|
|
|
97
97
|
|
|
98
98
|
return (
|
|
99
99
|
<div>
|
|
100
|
-
<p>{timer.
|
|
100
|
+
<p>{timer.time}</p>
|
|
101
101
|
<button onClick={timer.toggle}>
|
|
102
102
|
{timer.isRunning ? "Pause" : "Start"}
|
|
103
103
|
</button>
|
|
@@ -151,30 +151,24 @@ A hook that manages countdown timer state with comprehensive controls.
|
|
|
151
151
|
|
|
152
152
|
#### Returns `UseTimerReturn`
|
|
153
153
|
|
|
154
|
-
| Property
|
|
155
|
-
|
|
|
156
|
-
| `time`
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
171
|
-
| `
|
|
172
|
-
| `reset` | `() => void` | Reset to initial time |
|
|
173
|
-
| `restart` | `() => void` | Reset and immediately start |
|
|
174
|
-
| `toggle` | `() => void` | Toggle between start/pause |
|
|
175
|
-
| `addTime` | `(ms: number) => void` | Add time to the timer |
|
|
176
|
-
| `subtractTime` | `(ms: number) => void` | Subtract time from the timer |
|
|
177
|
-
| `setTime` | `(ms: number) => void` | Set timer to a specific value |
|
|
154
|
+
| Property | Type | Description |
|
|
155
|
+
| -------------- | ---------------------- | ------------------------------------------------------- |
|
|
156
|
+
| `time` | `string` | Formatted time string (e.g., "05:30") |
|
|
157
|
+
| `progress` | `number` | Progress percentage (0-100) |
|
|
158
|
+
| `status` | `TimerStatus` | Current status: `idle`, `running`, `paused`, `finished` |
|
|
159
|
+
| `isRunning` | `boolean` | Whether timer is running |
|
|
160
|
+
| `isPaused` | `boolean` | Whether timer is paused |
|
|
161
|
+
| `isFinished` | `boolean` | Whether timer has finished |
|
|
162
|
+
| `isIdle` | `boolean` | Whether timer is idle |
|
|
163
|
+
| `start` | `() => void` | Start the timer |
|
|
164
|
+
| `pause` | `() => void` | Pause the timer |
|
|
165
|
+
| `stop` | `() => void` | Stop timer (keep current time) |
|
|
166
|
+
| `reset` | `() => void` | Reset to initial time |
|
|
167
|
+
| `restart` | `() => void` | Reset and immediately start |
|
|
168
|
+
| `toggle` | `() => void` | Toggle between start/pause |
|
|
169
|
+
| `addTime` | `(ms: number) => void` | Add time to the timer |
|
|
170
|
+
| `subtractTime` | `(ms: number) => void` | Subtract time from the timer |
|
|
171
|
+
| `setTime` | `(ms: number) => void` | Set timer to a specific value |
|
|
178
172
|
|
|
179
173
|
### `ms` Helper Object
|
|
180
174
|
|
|
@@ -208,7 +202,7 @@ function CountdownTimer() {
|
|
|
208
202
|
|
|
209
203
|
return (
|
|
210
204
|
<div>
|
|
211
|
-
<div className="time-display">{timer.
|
|
205
|
+
<div className="time-display">{timer.time}</div>
|
|
212
206
|
<div className="controls">
|
|
213
207
|
<button onClick={timer.toggle}>
|
|
214
208
|
{timer.isRunning ? "⏸ Pause" : "▶ Start"}
|
|
@@ -233,7 +227,7 @@ function PrecisionTimer() {
|
|
|
233
227
|
|
|
234
228
|
return (
|
|
235
229
|
<div>
|
|
236
|
-
<div className="precision-display">{timer.
|
|
230
|
+
<div className="precision-display">{timer.time}</div>
|
|
237
231
|
<button onClick={timer.toggle}>
|
|
238
232
|
{timer.isRunning ? "Pause" : "Start"}
|
|
239
233
|
</button>
|
|
@@ -254,7 +248,7 @@ function AutoStartTimer() {
|
|
|
254
248
|
onComplete: () => console.log("Completed!"),
|
|
255
249
|
});
|
|
256
250
|
|
|
257
|
-
return <div>{timer.
|
|
251
|
+
return <div>{timer.time}</div>;
|
|
258
252
|
}
|
|
259
253
|
```
|
|
260
254
|
|
|
@@ -272,7 +266,7 @@ function LoopingTimer() {
|
|
|
272
266
|
|
|
273
267
|
return (
|
|
274
268
|
<div>
|
|
275
|
-
<p>{timer.
|
|
269
|
+
<p>{timer.time}</p>
|
|
276
270
|
<button onClick={timer.toggle}>
|
|
277
271
|
{timer.isRunning ? "Pause" : "Start"}
|
|
278
272
|
</button>
|
|
@@ -291,7 +285,7 @@ function ManipulableTimer() {
|
|
|
291
285
|
|
|
292
286
|
return (
|
|
293
287
|
<div>
|
|
294
|
-
<p>{timer.
|
|
288
|
+
<p>{timer.time}</p>
|
|
295
289
|
<div className="controls">
|
|
296
290
|
<button onClick={timer.toggle}>
|
|
297
291
|
{timer.isRunning ? "Pause" : "Start"}
|
|
@@ -315,7 +309,7 @@ function TimerWithProgress() {
|
|
|
315
309
|
|
|
316
310
|
return (
|
|
317
311
|
<div>
|
|
318
|
-
<p>{timer.
|
|
312
|
+
<p>{timer.time}</p>
|
|
319
313
|
<div className="progress-bar">
|
|
320
314
|
<div
|
|
321
315
|
className="progress-fill"
|
|
@@ -347,7 +341,7 @@ function CustomFormattedTimer() {
|
|
|
347
341
|
|
|
348
342
|
return (
|
|
349
343
|
<div>
|
|
350
|
-
<p>{timer.
|
|
344
|
+
<p>{timer.time}</p> {/* "2h 30m 0s" */}
|
|
351
345
|
<button onClick={timer.toggle}>
|
|
352
346
|
{timer.isRunning ? "Pause" : "Start"}
|
|
353
347
|
</button>
|
|
@@ -378,7 +372,7 @@ function KitchenTimer() {
|
|
|
378
372
|
</button>
|
|
379
373
|
))}
|
|
380
374
|
</div>
|
|
381
|
-
<p>{timer.
|
|
375
|
+
<p>{timer.time}</p>
|
|
382
376
|
<button onClick={timer.toggle}>
|
|
383
377
|
{timer.isRunning ? "Pause" : "Start"}
|
|
384
378
|
</button>
|