Skip to content

Commit

Permalink
Merge pull request #17 from PranuPranav97/fix/useCountDownTimer
Browse files Browse the repository at this point in the history
fix: Added useCountDownTimer hook docs.
  • Loading branch information
PranuPranav97 authored Jul 5, 2023
2 parents 8e362b7 + c30a447 commit fbc4002
Showing 1 changed file with 60 additions and 0 deletions.
60 changes: 60 additions & 0 deletions docs/Hooks/useCountDownTimer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
sidebar_position: 1
custom_edit_url: https://github.com/PranuPranav97/zop-hooks-docs
---

# useCountdownTimer

The `useCountdownTimer` hook is a custom React hook that creates a countdown timer.

### Usage

To use the `useCountdownTimer` hook, follow these steps:
Import the hook:

```typescript
import { useCountdownTimer } from "./useCountdownTimer";
```

Call the `useCountdownTimer` hook within your functional component, passing the `duration` prop as an object:

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

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

- `remainingTime` (number): The remaining time in seconds.
- `formattedTime` (string): The remaining time formatted as "HH:MM:SS".

### Example

Here's an example of how you can use the `useCountdownTimer` hook in a React component:

```typescript
import React from "react";
import { useCountdownTimer } from "./useCountdownTimer";

const CountdownTimerComponent = () => {
const { remainingTime, formattedTime } = useCountdownTimer({ duration: 120 });

return (
<div>
<p>Remaining Time: {formattedTime}</p>
<p>Seconds Left: {remainingTime}</p>
</div>
);
};

export default CountdownTimerComponent;
```

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.

### Customization

You can customize the `formatTime` function within the `useCountdownTimer` hook to modify the time format according to your requirements.

Make sure to import the `useCountdownTimer` hook correctly based on your project structure.

I hope this documentation helps! Let me know if you have any further questions.

0 comments on commit fbc4002

Please sign in to comment.