From c30a4470c78aa100c93f23877a677dc9cd4fc2bd Mon Sep 17 00:00:00 2001
From: Pranav <pranavshastri07@gmail.com>
Date: Wed, 5 Jul 2023 22:16:54 +0530
Subject: [PATCH] fix: Added useCountDownTimer hook docs.

---
 docs/Hooks/useCountDownTimer.md | 60 +++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 docs/Hooks/useCountDownTimer.md

diff --git a/docs/Hooks/useCountDownTimer.md b/docs/Hooks/useCountDownTimer.md
new file mode 100644
index 0000000..a879f84
--- /dev/null
+++ b/docs/Hooks/useCountDownTimer.md
@@ -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.