From 0b2b5d2b975d44c88d9806ff69eec8f90e58f9d2 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:22:10 -0500 Subject: [PATCH 1/7] docs: delete unlimited stopwatch info #29 --- README.md | 66 ------------------------------------------------------- 1 file changed, 66 deletions(-) diff --git a/README.md b/README.md index d693de8..e9f389d 100644 --- a/README.md +++ b/README.md @@ -207,72 +207,6 @@ const ReactCounter = () => { export default ReactCounter; ``` -### useUnlimitedStopwatch - -The useStopwatch hook provides unlimited stopwatch functionality. - -It takes two arguments: - -- `startPaused` (optional boolean): a boolean flag that determines whether the stopwatch should start in a paused state. Defaults to false. -- `separator` (optional string): a string that specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. - -It returns an object with the following props: - -- `current`: an object holding the current time of the stopwatch in both leading zero and non-leading zero formats. This object has two properties: - - `withLeadingZero`: a string indicating the current time of the stopwatch with leading zeroes where necessary. - - `withoutLeadingZero`: a string indicating the current time of the stopwatch without leading zeros. -- `isPaused`: a boolean value indicating if the stopwatch is currently paused. -- `currentDays`: a number indicating the current value of the days on the stopwatch. -- `currentHours`: a number indicating the current value of the hours on the stopwatch. -- `currentMinutes`: a number indicating the current value of the minutes on the stopwatch. -- `currentSeconds`: a number indicating the current value of the seconds on the stopwatch. -- `elapsedSeconds`: a number indicating the total elapsed time, calculated in seconds, since the stopwatch started. -- `pause`: a function that, when called, will pause the stopwatch. -- `play`: a function that, when called, will resume (or start) the stopwatch. -- `reset`: a function that, when called, will reset the stopwatch. -- `togglePause`: a function that, when called, will toggle between pausing and playing the stopwatch. - -Example: - -```tsx -import { useUnlimitedStopwatch } from "final-countdown-js"; - -const ReactCounter = () => { - const { - current, - currentDays, - currentHours, - currentMinutes, - currentSeconds, - elapsedSeconds, - isPaused, - pause, - play, - reset, - togglePause, - } = useUnlimitedStopwatch(); - - return ( -
-

Counter value: {current.withLeadingZero}

-

Counter value: {current.withoutLeadingZero}

-

Days: {currentDays}

-

Hours: {currentHours}

-

Minutes: {currentMinutes}

-

Seconds: {currentSeconds}

-

Elapsed seconds: {elapsedSeconds}

-

Is the counter paused? {isPaused ? "Yes" : "No"}

- - - - -
- ); -}; - -export default ReactCounter; -``` - ### useTimer The useTimer hook provides timer functionality. From 98fea729ca89270b8488a695a61c04464de67f1e Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:27:33 -0500 Subject: [PATCH 2/7] docs: update useCountDown entry #29 --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e9f389d..f23ab26 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,9 @@ It takes three arguments: - `min` (number): the initial value of the counter. - `max`(number): the final value of the counter. It has to be greater than `min`. -- `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. -- `onFinish` (optional function): a function that will be called when the counter reaches the final value. +- `options`(optional object): the options for the counter. + - `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. + - `onFinish` (optional function): a function that will be called when the counter reaches the final value. It returns an object with the following props: @@ -56,7 +57,10 @@ import { useCountDown } from "final-countdown-js"; const ReactCounter = () => { const { current, isPaused, isOver, pause, play, reset, togglePause } = - useCountDown(0, 10); + useCountDown(0, 10, { + startPaused: false, + onFinish: () => console.log("Counter ended"), + }); return (
From eba257f4f997e5721b5e3fa79984393e834ae976 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:28:21 -0500 Subject: [PATCH 3/7] docs: update useCountUp entry #29 --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f23ab26..b21e43b 100644 --- a/README.md +++ b/README.md @@ -87,8 +87,9 @@ It takes three arguments: - `min` (number): the initial value of the counter. - `max`(number): the final value of the counter. It has to be greater than `min`. -- `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. -- `onFinish` (optional function): a function that will be called when the counter reaches the final value. +- `options`(optional object): the options for the counter. + - `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. + - `onFinish` (optional function): a function that will be called when the counter reaches the final value. It returns an object with the following props: @@ -109,7 +110,10 @@ import { useCountUp } from "final-countdown-js"; const ReactCounter = () => { const { current, isPaused, isOver, pause, play, reset, togglePause } = - useCountDown(0, 10); + useCountUp(0, 10, { + startPaused: false, + onFinish: () => console.log("Counter ended"), + }); return (
From 30f6295df4e8ef16f3f9650c516ecbf6b5e38d6a Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:44:52 -0500 Subject: [PATCH 4/7] docs: update useStopwatch #29 --- README.md | 20 +++++++++----------- src/App.tsx | 4 +--- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b21e43b..7b8486b 100644 --- a/README.md +++ b/README.md @@ -136,15 +136,13 @@ export default ReactCounter; The useStopwatch hook provides stopwatch functionality with a limit. -It takes six arguments: +It takes one argument: -- `days` (number): the final value of the days. It has to be equal to or greater than 0. -- `hours` (number): the final value of the hours. The value must be between 0 (inclusive) and 24 (exclusive). -- `minutes` (number): the final value of the minutes. The value must be between 0 (inclusive) and 60 (exclusive). -- `seconds` (number): the final value of the seconds. The value must be between 0 (inclusive) and 60 (exclusive). -- `startPaused` (optional boolean): a boolean flag that determines whether the stopwatch should start in a paused state. Defaults to false. -- `separator` (optional string): a string that specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. -- `onFinish` (optional function): a function that will be called when the stopwatch reaches the final value. +- `options`(optional object): the options for the stopwatch. + - `endTime` (options string): specifies the time when the stopwatch will stop. It must be in the `dd:hh:mm:ss` format. If it is not specified, the stopwatch will not end. + - `startPaused` (optional boolean): determines whether the stopwatch should start in a paused state. Defaults to false. + - `onFinish` (optional function): a function that will be called when the stopwatch reaches the final value. + - `separator` (optional string): specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. It returns an object with the following props: @@ -158,10 +156,10 @@ It returns an object with the following props: - `currentMinutes`: a number indicating the current value of the minutes on the stopwatch. - `currentSeconds`: a number indicating the current value of the seconds on the stopwatch. - `elapsedSeconds`: a number indicating the total elapsed time, calculated in seconds, since the stopwatch started. -- `remainingSeconds`: a number indicating the total remaining time, calculated in seconds, until the stopwatch reaches the initially set time. +- `remainingSeconds`: a number indicating the total remaining time, calculated in seconds, until the stopwatch reaches the initially set time. If the `endTime` is not specified, it will always be 0. - `remainingTime`: analogous to the `current` object, this object holds the remaining time in both formats: - - `withLeadingZero`: a string indicating the remaining time with leading zeroes. - - `withoutLeadingZero`: a string indicating the remaining time without leading zeroes. + - `withLeadingZero`: a string indicating the remaining time with leading zeroes. If the `endTime` is not specified, it will always be 00:00:00:00. + - `withoutLeadingZero`: a string indicating the remaining time without leading zeroes. If the `endTime` is not specified, it will always be 0:0:0:0. - `pause`: a function that, when called, will pause the stopwatch. - `play`: a function that, when called, will resume (or start) the stopwatch. - `reset`: a function that, when called, will reset the stopwatch. diff --git a/src/App.tsx b/src/App.tsx index a8040a6..a31ce89 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,9 +16,7 @@ const App = () => { play, reset, togglePause, - } = useStopwatch({ - endTime: "00:00:10:03", - }); + } = useStopwatch(); return (
From b060a5780ee45a106e24de9872ebb014f31cadf3 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:46:30 -0500 Subject: [PATCH 5/7] docs: update useStopwatch example #29 --- README.md | 7 ++++++- src/App.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7b8486b..7fafdd9 100644 --- a/README.md +++ b/README.md @@ -186,7 +186,12 @@ const ReactCounter = () => { play, reset, togglePause, - } = useStopwatch(1, 0, 10, 50); + } = useStopwatch({ + endTime: "00:00:00:10", + startPaused: true, + separator: "-", + onFinish: () => console.log("Stopwatch ended"), + }); return (
diff --git a/src/App.tsx b/src/App.tsx index a31ce89..d7fc107 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,12 @@ const App = () => { play, reset, togglePause, - } = useStopwatch(); + } = useStopwatch({ + endTime: "00:00:00:10", + startPaused: true, + separator: "-", + onFinish: () => console.log("Stopwatch ended"), + }); return (
From b35c69280d51fcbf4c081c20de3c02e03b4296e2 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:48:54 -0500 Subject: [PATCH 6/7] docs: update useTimer entry #29 --- README.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7fafdd9..705ca26 100644 --- a/README.md +++ b/README.md @@ -222,15 +222,13 @@ export default ReactCounter; The useTimer hook provides timer functionality. -It takes six arguments: +It takes two arguments: -- `days` (number): the initial value of the days. It has to be equal to or greater than 0. -- `hours` (number): the initial value of the hours. The value must be between 0 (inclusive) and 24 (exclusive). -- `minutes` (number): the initial value of the minutes. The value must be between 0 (inclusive) and 60 (exclusive). -- `seconds` (number): the initial value of the seconds. The value must be between 0 (inclusive) and 60 (exclusive). -- `startPaused` (optional boolean): a boolean flag that determines whether the timer should start in a paused state. Defaults to false. -- `separator` (optional string): a string that specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. -- `onFinish` (optional function): a function that will be called when the timer reaches the final value. +- `startTime` (string): specifies the time when the timer will begin. It must be in the `dd:hh:mm:ss` format. +- `options`(optional object): the options for the timer. + - `startPaused` (optional boolean): determines whether the timer should start in a paused state. Defaults to false. + - `onFinish` (optional function): a function that will be called when the timer reaches the final value. + - `separator` (optional string): specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. It returns an object with the following props: @@ -274,7 +272,11 @@ const ReactCounter = () => { play, reset, togglePause, - } = useTimer(0, 10, 50); + } = useTimer("00:00:00:10", { + startPaused: true, + separator: "-", + onFinish: () => console.log("Stopwatch ended"), + }); return (
From 8d19b9b32d1910284c83f4a97f35883c473c4e52 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sat, 2 Mar 2024 08:54:45 -0500 Subject: [PATCH 7/7] docs: fix spelling errors #29 --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 705ca26..24745f0 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ It takes three arguments: - `min` (number): the initial value of the counter. - `max`(number): the final value of the counter. It has to be greater than `min`. - `options`(optional object): the options for the counter. - - `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. + - `startPaused` (optional boolean): determines whether the counter should start in a paused state. Defaults to false. - `onFinish` (optional function): a function that will be called when the counter reaches the final value. It returns an object with the following props: @@ -88,7 +88,7 @@ It takes three arguments: - `min` (number): the initial value of the counter. - `max`(number): the final value of the counter. It has to be greater than `min`. - `options`(optional object): the options for the counter. - - `startPaused` (optional boolean): a boolean flag that determines whether the counter should start in a paused state. Defaults to false. + - `startPaused` (optional boolean): determines whether the counter should start in a paused state. Defaults to false. - `onFinish` (optional function): a function that will be called when the counter reaches the final value. It returns an object with the following props: @@ -134,12 +134,12 @@ export default ReactCounter; ### useStopwatch -The useStopwatch hook provides stopwatch functionality with a limit. +The useStopwatch hook provides stopwatch functionality with or without a limit. It takes one argument: - `options`(optional object): the options for the stopwatch. - - `endTime` (options string): specifies the time when the stopwatch will stop. It must be in the `dd:hh:mm:ss` format. If it is not specified, the stopwatch will not end. + - `endTime` (options string): specifies the time at which the stopwatch will stop. It must be in `dd:hh:mm:ss` format. If not specified, the stopwatch will not end. - `startPaused` (optional boolean): determines whether the stopwatch should start in a paused state. Defaults to false. - `onFinish` (optional function): a function that will be called when the stopwatch reaches the final value. - `separator` (optional string): specifies the separator to be used between days, hours, minutes, and seconds when the time is represented as a string. By default, colon (:) is used as a separator. @@ -156,10 +156,10 @@ It returns an object with the following props: - `currentMinutes`: a number indicating the current value of the minutes on the stopwatch. - `currentSeconds`: a number indicating the current value of the seconds on the stopwatch. - `elapsedSeconds`: a number indicating the total elapsed time, calculated in seconds, since the stopwatch started. -- `remainingSeconds`: a number indicating the total remaining time, calculated in seconds, until the stopwatch reaches the initially set time. If the `endTime` is not specified, it will always be 0. +- `remainingSeconds`: a number indicating the total remaining time, calculated in seconds, until the stopwatch reaches the initially set time. If `endTime` is not specified, it will always be 0. - `remainingTime`: analogous to the `current` object, this object holds the remaining time in both formats: - - `withLeadingZero`: a string indicating the remaining time with leading zeroes. If the `endTime` is not specified, it will always be 00:00:00:00. - - `withoutLeadingZero`: a string indicating the remaining time without leading zeroes. If the `endTime` is not specified, it will always be 0:0:0:0. + - `withLeadingZero`: a string indicating the remaining time with leading zeroes. If `endTime` is not specified, it will always be 00:00:00:00. + - `withoutLeadingZero`: a string indicating the remaining time without leading zeroes. If `endTime` is not specified, it will always be 0:0:0:0. - `pause`: a function that, when called, will pause the stopwatch. - `play`: a function that, when called, will resume (or start) the stopwatch. - `reset`: a function that, when called, will reset the stopwatch. @@ -224,7 +224,7 @@ The useTimer hook provides timer functionality. It takes two arguments: -- `startTime` (string): specifies the time when the timer will begin. It must be in the `dd:hh:mm:ss` format. +- `startTime` (string): specifies the time at which the timer will start. It must be in `dd:hh:mm:ss` format. - `options`(optional object): the options for the timer. - `startPaused` (optional boolean): determines whether the timer should start in a paused state. Defaults to false. - `onFinish` (optional function): a function that will be called when the timer reaches the final value. @@ -275,7 +275,7 @@ const ReactCounter = () => { } = useTimer("00:00:00:10", { startPaused: true, separator: "-", - onFinish: () => console.log("Stopwatch ended"), + onFinish: () => console.log("Timer ended"), }); return (