{JSON.stringify(value, null, 2)}

- This hook returns a ref that you attach to the component (like a modal or dropdown).

- When a user clicks anywhere outside that element, the handler is triggered.

- Works with both mousedown and touchstart for cross-device support.

---

$3

useCopyToClipboard hook provides an easy way to copy text to the user's clipboard and track whether the operation succeeded.

Import

`tsx
import { useCopyToClipboard } from "fizzy-hooks";
`

Returns
| Value | Type | Description |
| --------- | ------------------------------------ | ---------------------------------------------------- |
| copy | (text: string) => Promise | Function to copy given text to clipboard |
| success | boolean | true if the last copy was successful, else false |

`tsx
import { useCopyToClipboard } from "fizzy-hooks";
import { useState } from "react";

function CopyExample() {
const [text, setText] = useState("Hello world!");
const { copy, success } = useCopyToClipboard();

return (


- The copy() function copies any string to the clipboard using the Clipboard API.

- The success state is set to true for 2 seconds after a successful copy.

- You can use success to show a confirmation or status message to the user.

---

$3

useDebounce hook delays updating a value until after a specified wait time has passed without changes. This is useful for optimizing performance in input fields, search queries, or any value that changes rapidly.

Import

`tsx
import { useDebounce } from "fizzy-hooks";
`

Parameters
| Parameter | Type | Default | Description |
| --------- | -------- | ------- | ------------------------------------- |
| value | T | – | The input value to debounce |
| delay | number | 500 | Time in milliseconds to delay updates |

Returns
| Value | Type | Description |
| ---------------- | ---- | --------------------------------- |
| debouncedValue | T | The updated value after the delay |

Example

`tsx
import { useEffect, useState } from "react";
import { useDebounce } from "fizzy-hooks";

function SearchInput() {
const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 300);

useEffect(() => {
if (debouncedQuery) {
// Trigger API or search
}
}, [debouncedQuery]);

return (
<>
type="text"
placeholder="Search..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>

{debouncedQuery}

useDefault hook helps you provide a fallback value when the current value is null, undefined, or deemed invalid by a custom validator. This is especially useful when working with user input, optional props, or external data that may not always be available.

Import

`tsx
import { useDefault } from "fizzy-hooks";
`

Parameters

| Parameter | Type | Description |
| ---------------------- | ----------------------- | ----------------------------------------------------------------------- |
| value | T | The value to check and potentially replace |
| defaultValue | T | The fallback value to use if value is invalid |
| isInvalid (optional) | (value: T) => boolean | Optional custom validation function. Return true to use default value |

Returns
| Value | Type | Description |
| ---------------- | ---- | ------------------------------------------------- |
| effectiveValue | T | Either the original value or the fallback default |

Example 1 – Basic Fallback

`tsx
import { useDefault } from "fizzy-hooks";

function Username({ name }: { name?: string }) {
const displayName = useDefault(name, "Guest");

return

Hello, {displayName}!

`tsx
import { useDefault } from "fizzy-hooks";

function AgeDisplay({ age }: { age: number | null }) {
const displayAge = useDefault(age, 18, (v) => v === null || v <= 0);

return

Age: {displayAge}

useDocumentTitle hook allows you to dynamically set the browser tab's title from within a React component.

Import

`tsx
import { useDocumentTitle } from "fizzy-hooks";
`

Parameters
| Parameter | Type | Description |
| --------- | -------- | ---------------------------------------- |
| title | string | The title you want to display in the tab |

Example

`tsx
import { useDocumentTitle } from "fizzy-hooks";

function AboutPage() {
useDocumentTitle("About Us");

return

Welcome to the About Page

useEventListener is a flexible React hook that lets you add event listeners to various targets like window, document, or DOM elements (including React refs). It handles automatic cleanup and maintains a stable handler function.

Import

`tsx
import { useEventListener } from "fizzy-hooks";
`

Parameters
| Parameter | Type | Description |
| ----------- | --------------------------------------------------------- | ---------------------------------------------------------------------- |
| target | Window \| Document \| HTMLElement \| RefObject | The element or reference to attach the event listener to |
| eventName | string | The name of the event to listen for (e.g., "click", "scroll") |
| handler | (event: Event) => void | The callback function that will be invoked when the event is triggered |
| options (optional) | boolean \| AddEventListenerOptions | Optional options passed to addEventListener (e.g., { once: true }) |

Example 1 : Listen to window resize

`tsx
import { useState } from "react";
import { useEventListener } from "fizzy-hooks";

function WindowResizeTracker() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});

useEventListener("resize", () => {
setSize({ width: window.innerWidth, height: window.innerHeight });
});

return (



Width: {size.width}, Height: {size.height}


`tsx
import { useRef } from "react";
import { useEventListener } from "fizzy-hooks";

function ClickOutsideAlert() {
const boxRef = useRef(null);

useEventListener(boxRef, "click", (e) => {
console.log("Box clicked");
});

useEventListener(document, "click", (e) => {
if (!boxRef.current?.contains(e.target as Node)) {
alert("Clicked outside the box!");
}
});

return (


useFavicon hook allows you to dynamically update the favicon of your web page by setting a new image URL.

Import

`tsx
import { useFavicon } from "fizzy-hooks";
`

Parameter
| Parameter | Type | Description |
| --------- | -------------- | -------------------------------------- |
| href | string | The URL of the image to use as favicon |

Example

`tsx
import { useFavicon } from "fizzy-hooks";

function FaviconExample() {
useFavicon("https://example.com/my-icon.ico");

return

The favicon should now be updated!

The hook checks if a exists in the .
If it exists, it updates its href to the new favicon URL.
If it doesn’t, it creates a new element and appends it to the .
The update happens reactively every time the href value changes.

---

$3

useFetch hook is a simple and powerful way to fetch data from APIs in your React components. It handles loading, error, and success states, and also provides a refetch() method.

Import

`jsx
import { useFetch } from "fizzy-hooks";
`

Parameters

| Name | Type | Description |
| -------------- | ------------- | ---------------------------------------------------------------------- |
| url | string | The endpoint URL to fetch data from. |
| options | RequestInit | Optional fetch options (headers, method, body, etc). |
| dependencies | any[] | Optional dependency array that triggers refetching when values change. |

Returns
| Value | Type | Description |
| ----------- | --------------------- | ------------------------------------------- |
| data | T \| null | The response data after a successful fetch. |
| loading | boolean | Indicates if the request is in progress. |
| error | string \| null | Error message if the fetch fails. |
| refetch() | function | Manually re-trigger the fetch operation. |

Example

`tsx
import { useState } from "react";
import { useFetch } from "fizzy-hooks";

function FetchData() {
const [id, setId] = useState(1);
const { data, loading, error, refetch } = useFetch(
https://jsonplaceholder.typicode.com/users/${id},
{
method: "GET",
},
[id]
);

if (loading) return

Loading...

useFetch automatically calls the API when the component mounts. You can pass any valid fetch options like headers or POST data.

If you want the fetch to re-run when certain values change (like query), pass them in the dependencies array.

Use refetch()` manually to re-trigger the request

---