> ## Documentation Index
> Fetch the complete documentation index at: https://use-any-hook-d92674ab.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useClickOutside

> Detects clicks outside a specified element and triggers a callback function.

#### **Install**

```bash npm theme={null}
npm i use-any-hook
```

#### **Description**

The `useClickOutside` hook allows you to detect clicks outside a specific DOM element and execute a callback function in response. This is useful for closing modal dialogs, dropdown menus, or resetting states when the user interacts outside of a specified UI component boundary.

#### **Parameters**

| Name     | Type      | Description                                                              |
| -------- | --------- | ------------------------------------------------------------------------ |
| ref      | RefObject | A ref object pointing to the DOM element you want to monitor.            |
| callback | Function  | The function to call when a click is detected outside the specified ref. |

#### **Return Values**

| Name | Type | Description                           |
| ---- | ---- | ------------------------------------- |
| None | N/A  | This hook does not return any values. |

#### **Example**

```javascript useClickOutside.example.tsx theme={null}
import { useRef } from "react";
import { useClickOutside } from "use-any-hook";

function MyComponent() {
  const myRef = useRef < HTMLDivElement > null;

  const handleClickOutside = () => {
    console.log("Clicked outside the element");
  };

  useClickOutside(myRef, handleClickOutside);

  return (
    <div className="p-14 bg-red-500" ref={myRef}>
      {/* Your content here */}
    </div>
  );
}
```