diff --git a/README.md b/README.md index d693de8..24745f0 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): 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 (
@@ -83,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): 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: @@ -105,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 (
@@ -126,17 +134,15 @@ 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 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 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. It returns an object with the following props: @@ -150,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 `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 `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. @@ -180,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 (
@@ -207,85 +218,17 @@ 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. -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 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. + - `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: @@ -329,7 +272,11 @@ const ReactCounter = () => { play, reset, togglePause, - } = useTimer(0, 10, 50); + } = useTimer("00:00:00:10", { + startPaused: true, + separator: "-", + onFinish: () => console.log("Timer ended"), + }); return (
diff --git a/src/App.tsx b/src/App.tsx index a8040a6..d7fc107 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,10 @@ const App = () => { reset, togglePause, } = useStopwatch({ - endTime: "00:00:10:03", + endTime: "00:00:00:10", + startPaused: true, + separator: "-", + onFinish: () => console.log("Stopwatch ended"), }); return (