useOnClickOutside

Hook for detecting clicks outside of an element.

Import

import { useOnClickOutside } from "amvasdev-ui";

Signature

useOnClickOutside(ref, handler): void

Parameters

Name	Type	Required	Description
ref	RefObject<HTMLElement>	Yes	Reference to the element to detect outside clicks
handler	(event: MouseEvent \| TouchEvent) => void	Yes	Function to call when clicking outside

Live Demo

Times closed by clicking outside: 0

Examples

Dropdown Example

import { useOnClickOutside } from "amvasdev-ui";
import { useRef, useState } from "react";

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

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

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <div>Dropdown content</div>}
    </div>
  );
}

Modal Example

import { useOnClickOutside } from "amvasdev-ui";
import { useRef } from "react";

function Modal({ onClose }) {
  const modalRef = useRef(null);

  useOnClickOutside(modalRef, onClose);

  return (
    <div className="overlay">
      <div ref={modalRef} className="modal-content">
        <h2>Modal Title</h2>
        <p>Click outside to close</p>
      </div>
    </div>
  );
}

Notes

Detects both mouse clicks and touch events
Automatically cleans up on component unmount