Skip to content

Commit

Permalink
fix: Update useCountdownTimer hook docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
Pranav committed Jul 6, 2023
1 parent 05a3f42 commit 64e7c11
Showing 1 changed file with 17 additions and 7 deletions.
24 changes: 17 additions & 7 deletions docs/Hooks/useCountDownTimer.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,16 @@ import { useCountdownTimer } from "zop-hooks";
Call the `useCountdownTimer` hook within your functional component, passing the `duration` prop as an object:

```typescript
const { remainingTime, formattedTime } = useCountdownTimer({ duration: 60 });
const { remainingTime, formattedTime, restartTimer } = useCountdownTimer({
duration: 60,
});
```

You can access the `remainingTime` and `formattedTime` variables returned by the hook:
You can access the `remainingTime`, `formattedTime` and `restartTimer` variables returned by the hook:

- `remainingTime` (number): The remaining time in seconds.
- `formattedTime` (string): The remaining time formatted as "HH:MM:SS".
- `restartTimer ` (function): A function to restart the timer. It resets the remaining time to the initial duration specified.

### Example

Expand All @@ -35,18 +38,25 @@ Here's an example of how you can use the `useCountdownTimer` hook in a React com
import React from "react";
import { useCountdownTimer } from "zop-hooks";

const CountdownTimerComponent = () => {
const { remainingTime, formattedTime } = useCountdownTimer({ duration: 120 });
const CountDownTimer = () => {
const { remainingTime, formattedTime, restartTimer } = useCountdownTimer({
duration: 60, // Initial duration in seconds
dependencies: [], // Optional array of dependencies
});

const handleRestartTimer = () => {
restartTimer();
};

return (
<div>
<p>Remaining Time: {formattedTime}</p>
<p>Seconds Left: {remainingTime}</p>
<div>Remaining Time: {formattedTime}</div>
<button onClick={handleRestartTimer}>Restart Timer</button>
</div>
);
};

export default CountdownTimerComponent;
export default CountDownTimer;
```

In the example above, the `CountdownTimer` component uses the `useCountdownTimer` hook to create a countdown timer with a duration of 120 seconds. The remaining time and formatted time are displayed in the component.
Expand Down

0 comments on commit 64e7c11

Please sign in to comment.