feat: add docs for each custom hook

Author: itszeeshan

docs/useArray.md

@@ -0,0 +1,43 @@
+# `useArray`
+
+A hook for managing and manipulating an array with functions like push, filter, update, remove, and clear.
+
+## Arguments
+
+- `defaultValue` (`array`): The initial array value.
+
+## Returns
+
+- An array containing:
+  - The current array value.
+  - Functions to manipulate the array (`push`, `filter`, `update`, `remove`, `clear`).
+
+## Hooks Involved
+
+- [useState](https://react.dev/reference/react/useState)
+
+## How to Use
+
+```js
+import useArray from "./useArray"
+
+export default function ArrayComponent() {
+    const { array, set, push, remove, filter, update, clear } = useArray([
+        1, 2, 3, 4, 5, 6,
+    ])
+
+    return (
+        <div>
+            <div>{array.join(", ")}</div>
+            <button onClick={() => push(7)}>Add 7</button>
+            <button onClick={() => update(1, 9)}>Change Second Element To 9</button>
+            <button onClick={() => remove(1)}>Remove Second Element</button>
+            <button onClick={() => filter(n => n < 3)}>
+                Keep Numbers Less Than 4
+            </button>
+            <button onClick={() => set([1, 2])}>Set To 1, 2</button>
+            <button onClick={clear}>Clear</button>
+        </div>
+    )
+}
+```

docs/useAsync.md

@@ -1,8 +1,8 @@
-### `useAsync`
+# `useAsync`
 
 A hook to handle asynchronous tasks.
 
-## Parameters
+## Arguments
 
 - `callback` (`function`): The asynchronous function to execute.
 - `dependencies` (`array`, optional): Dependency array to control when the async function should be executed.

docs/useClickOutside.md

@@ -0,0 +1,53 @@
+# `useClickOutside`
+
+A hook to detect clicks outside a specified element and trigger a callback.
+
+## Arguments
+
+- `ref` (`React.RefObject`): The ref object of the element to detect outside clicks.
+- `callback` (`function`): The function to call when a click outside is detected.
+
+## Returns
+
+- None
+
+## Hooks Involved
+
+- [useEventListener](./useEventListener.md)
+
+## How to Use
+
+```js
+import { useRef, useState } from "react"
+import useClickOutside from "./useClickOutside"
+
+export default function ClickOutsideComponent() {
+    const [open, setOpen] = useState(false)
+    const modalRef = useRef()
+
+    useClickOutside(modalRef, () => {
+        if (open) setOpen(false)
+    })
+
+    return (
+        <>
+            <button onClick={() => setOpen(true)}>Open</button>
+            <div
+                ref={modalRef}
+                style={{
+                    display: open ? "block" : "none",
+                    backgroundColor: "blue",
+                    color: "white",
+                    width: "100px",
+                    height: "100px",
+                    position: "absolute",
+                    top: "calc(50% - 50px)",
+                    left: "calc(50% - 50px)",
+                }}
+            >
+                <span>Modal</span>
+            </div>
+        </>
+    )
+}
+```

docs/useCookie.md

@@ -0,0 +1,37 @@
+# `useCookie`
+
+A hook for managing cookies with get, set, and delete functionality.
+
+## Arguments
+
+- `name` (`string`): The name of the cookie.
+- `defaultValue` (`string`): The initial value of the cookie.
+
+## Returns
+
+- An array containing:
+  - The current cookie value.
+  - Functions to set and delete the cookie.
+
+## Hooks Involved
+
+- [useState](https://react.dev/reference/react/useState)
+- [useCallback](https://react.dev/reference/react/useCallback)
+
+## How to Use
+
+```js
+import useCookie from "./useCookie"
+
+export default function CookieComponent() {
+    const [value, update, remove] = useCookie("name", "John")
+
+    return (
+        <>
+            <div>{value}</div>
+            <button onClick={() => update("Sally")}>Change Name To Sally</button>
+            <button onClick={remove}>Delete Name</button>
+        </>
+    )
+}
+```

docs/useCopyToClipboard.md

@@ -0,0 +1,34 @@
+# `useCopyToClipboard`
+
+## Arguments
+
+- None
+
+## Returns
+
+- An array containing:
+  - A function to copy text to the clipboard.
+  - A boolean indicating if the copy was successful.
+
+## Hooks Involved
+
+- [useState](https://react.dev/reference/react/useState)
+
+## How to Use
+
+```js
+import useCopyToClipboard from "./useCopyToClipboard"
+
+export default function CopyToClipboardComponent() {
+    const [copyToClipboard, { success }] = useCopyToClipboard()
+
+    return (
+        <>
+            <button onClick={() => copyToClipboard("This was copied")}>
+                {success ? "Copied" : "Copy Text"}
+            </button>
+            <input type="text" />
+        </>
+    )
+}
+```

docs/useDarkMode.md

@@ -0,0 +1,49 @@
+# `useDarkMode`
+
+A hook to manage dark mode state and apply dark mode styling based on user preference and localStorage.
+
+## Arguments
+
+- None
+
+## Returns
+
+- An array containing:
+  - A boolean indicating if dark mode is enabled.
+  - A function to toggle dark mode.
+
+## Hooks Involved
+
+- [useLocalStorage](./useLocalStorage.md)
+- [useMediaQuery](./useMediaQuery.md)
+- [useEffect](https://react.dev/reference/react/useEffect)
+
+## How to Use
+
+```js
+/* body.css file:
+body.dark-mode {
+    background-color: #333;
+}
+*/
+
+import useDarkMode from "./useDarkMode"
+import "./body.css"
+
+export default function DarkModeComponent() {
+    const [darkMode, setDarkMode] = useDarkMode()
+
+    return (
+        <button
+            onClick={() => setDarkMode(prevDarkMode => !prevDarkMode)}
+            style={{
+                border: `1px solid ${darkMode ? "white" : "black"}`,
+                background: "none",
+                color: darkMode ? "white" : "black",
+            }}
+        >
+            Toggle Dark Mode
+        </button>
+    )
+}
+```

docs/useDebounce.md

@@ -0,0 +1,37 @@
+# `useDebounce`
+
+A hook to debounce a callback function with a specified delay.
+
+## Arguments
+
+- `callback` (`function`): The function to debounce.
+- `delay` (`number`): The debounce delay in milliseconds.
+- `dependencies` (`array`): The dependencies for the effect.
+
+## Returns
+
+- None
+
+## Hooks Involved
+
+- [useTimeout](./useTimeout.md)
+- [useEffect](https://react.dev/reference/react/useEffect)
+
+## How to Use
+
+```js
+import { useState } from "react"
+import useDebounce from "./useDebounce"
+
+export default function DebounceComponent() {
+    const [count, setCount] = useState(10)
+    useDebounce(() => alert(count), 1000, [count])
+
+    return (
+        <div>
+            <div>{count}</div>
+            <button onClick={() => setCount(c => c + 1)}>Increment</button>
+        </div>
+    )
+}
+```

docs/useDebugInformation.md

@@ -0,0 +1,57 @@
+# `useDebugInformation`
+
+A hook to provide debugging information, including render count and changed props.
+
+## Arguments
+
+- `componentName` (`string`): The name of the component for debugging.
+- `props` (`object`): The current props of the component.
+
+## Returns
+
+- An object containing:
+  - `count`: The number of times the component has rendered.
+  - `changedProps`: An object detailing the props that have changed.
+  - `timeSinceLastRender`: The time in milliseconds since the last render.
+  - `lastRenderTimestamp`: The timestamp of the last render.
+
+## Hooks Involved
+
+- [useRenderCount](./useRenderCount.md)
+- [useRef](https://react.dev/reference/react/useRef)
+- [useEffect](https://react.dev/reference/react/useEffect)
+
+## How to Use
+
+```js
+import useDebugInformation from "./useDebugInformation"
+import useToggle from "../useToggle/useToggle"
+import { useState } from "react"
+
+export default function DebugInformationComponent() {
+    const [boolean, toggle] = useToggle(false)
+    const [count, setCount] = useState(0)
+
+    return (
+        <>
+            <ChildComponent boolean={boolean} count={count} />
+            <button onClick={toggle}>Toggle</button>
+            <button onClick={() => setCount(prevCount => prevCount + 1)}>
+                Increment
+            </button>
+        </>
+    )
+}
+
+function ChildComponent(props) {
+    const info = useDebugInformation("ChildComponent", props)
+
+    return (
+        <>
+            <div>{props.boolean.toString()}</div>
+            <div>{props.count}</div>
+            <div>{JSON.stringify(info, null, 2)}</div>
+        </>
+    )
+}
+```

docs/useDeepCompareEffect.md

@@ -0,0 +1,65 @@
+# `useDeepCompareEffect`
+
+A hook for running an effect with dependencies that are deeply compared.
+
+## Arguments
+
+- `callback` (`function`): The effect function to run.
+- `dependencies` (`array`): The dependencies for the effect, deeply compared.
+
+## Returns
+
+- None
+
+## Hooks Involved
+
+- [useEffect](https://react.dev/reference/react/useEffect)
+- [useRef](https://react.dev/reference/react/useRef)
+
+## libraries Involved
+- isEqual `lodash --> lodash/fp/isEqual`
+
+## How to Use
+
+```js
+import { useEffect, useState, useRef } from "react"
+import useDeepCompareEffect from "./useDeepCompareEffect"
+
+export default function DeepCompareEffectComponent() {
+    const [age, setAge] = useState(0)
+    const [otherCount, setOtherCount] = useState(0)
+    const useEffectCountRef = useRef()
+    const useDeepCompareEffectCountRef = useRef()
+
+    const person = { age: age, name: "Sergey" }
+
+    useEffect(() => {
+        useEffectCountRef.current.textContent =
+            parseInt(useEffectCountRef.current.textContent) + 1
+    }, [person])
+
+    useDeepCompareEffect(() => {
+        useDeepCompareEffectCountRef.current.textContent =
+            parseInt(useDeepCompareEffectCountRef.current.textContent) + 1
+    }, [person])
+
+    return (
+        <div>
+            <div>
+                useEffect: <span ref={useEffectCountRef}>0</span>
+            </div>
+            <div>
+                useDeepCompareEffect: <span ref={useDeepCompareEffectCountRef}>0</span>
+            </div>
+            <div>Other Count: {otherCount}</div>
+            <div>{JSON.stringify(person)}</div>
+            <button onClick={() => setAge(currentAge => currentAge + 1)}>
+                Increment Age
+            </button>
+            <button onClick={() => setOtherCount(count => count + 1)}>
+                Increment Other Count
+            </button>
+        </div>
+    )
+}
+```