# useClickOutside

> Runs a callback on outside click.

- Category: DOM
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-click-outside

## Signature

```ts
useClickOutside<T extends HTMLElement>(ref: RefObject<T>, callback: () => void): void
```

## Parameters

- `ref`: `RefObject<T>` — Ref attached to the element that counts as inside — clicks within it (or its children) never fire the callback.
- `callback`: `() => void` — Called on every mousedown outside the ref'd element — even while your UI is closed, so guard inside the callback if needed.

## Usage

```tsx
import { useRef, useState } from "react";
import { useClickOutside } from "hookli";

export function Demo() {
  const menuRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useClickOutside(menuRef, () => setOpen(false));

  return (
    <div ref={menuRef}>
      <button onClick={() => setOpen((prev) => !prev)}>Actions</button>
      {open && (
        <ul role="menu">
          <li>Rename</li>
          <li>Duplicate</li>
        </ul>
      )}
    </div>
  );
}
```

## Source

`src/hooks/useClickOutside.hook.ts`

```ts
import { Ref, useEffect } from "react";

type ClickOutsideCallback = () => void;

export const useClickOutside = <T extends HTMLElement>(
  ref: Ref<T>,
  callback: ClickOutsideCallback,
) => {
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        ref &&
        "current" in ref &&
        !ref.current?.contains(event.target as Node)
      ) {
        callback();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref, callback]);
};
```