Function: useOnClickOutside()

@arolariu/components

---

@arolariu/components / useOnClickOutside

Function: useOnClickOutside()

useOnClickOutside(ref, handler): void

Defined in: hooks/useOnClickOutside.tsx:34

Detects clicks or touch events outside a referenced element.

Parameters

ref

RefObject<HTMLElement>

A ref object pointing to the element to monitor.

handler

(event) => void

Callback invoked when a click or touch occurs outside the element.

Returns

void

Remarks

This hook is commonly used for implementing dropdown menus, modals, and popovers that should close when the user interacts outside their boundaries. It listens to both mouse and touch events to ensure broad device compatibility.

The event listeners are automatically cleaned up when the component unmounts.

Example

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useOnClickOutside(dropdownRef, () => setIsOpen(false));

  return (
    <div ref={dropdownRef}>
      {isOpen && <DropdownMenu />}
    </div>
  );
}