useOutsideClick

A hook that detects clicks outside of a specified element. Perfect for implementing dropdown menus, modal dialogs, or any component that needs to close when clicking outside.

Parameters

• ref: MutableRefObject<HTMLElement | null> - Reference to the element to monitor
• fn: () => void - Callback function to execute when a click outside occurs

Usage

import { useOutsideClick } from '@rhinolabs/react-hooks';
import { useRef, useState } from 'react';

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

  useOutsideClick(dropdownRef, () => {
    if (isOpen) setIsOpen(false);
  });

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

      {isOpen && (
        <div className="dropdown-menu">
          <a href="#">Option 1</a>
          <a href="#">Option 2</a>
          <a href="#">Option 3</a>
        </div>
      )}
    </div>
  );
}

Notes

• Uses event delegation
• Handles cleanup automatically
• Type-safe ref handling
• Efficient event binding
• Supports nested elements
• Ignores clicks inside
• DOM-based detection
• No unnecessary re-renders