How to Detect Click Outside an Element in React

Detecting clicks outside an element is one of the most common UI patterns in React. It's essential for closing modals, dropdown menus, popover menus, and tooltips when a user clicks elsewhere on the page.

The Problem

When building interactive components like dropdown menus or modals, you need to close them when the user clicks anywhere outside. Implementing this manually requires:

1. Adding a document-level click event listener
2. Checking if the click target is inside or outside your element
3. Cleaning up the listener on unmount
4. Handling edge cases (portals, nested elements, etc.)

The Manual Approach

Here's how most developers implement this from scratch:

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    function handleClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  return <div ref={ref}>{/* dropdown content */}</div>;
}

This works, but you'll repeat this pattern everywhere. And it misses edge cases like touch events, iframe clicks, and shadow DOM.

The Better Way: useClickOutside

ReactUse provides useClickOutside that handles all of this for you:

import { useClickOutside } from "@reactuses/core";
import { useRef, useState } from "react";

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

  useClickOutside(ref, () => {
    setIsOpen(false);
  });

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Menu</button>
      {isOpen && (
        <div ref={ref}>
          <p>Click outside to close</p>
        </div>
      )}
    </div>
  );
}

Common Use Cases

• Modal dialogs — close when clicking the backdrop
• Dropdown menus — close when clicking outside the menu
• Tooltip/Popover — dismiss on outside interaction
• Search autocomplete — close suggestions panel
• Context menus — dismiss custom right-click menus

Try It Live

Check out the interactive demo on our documentation site, where you can edit the code and see results in real-time.

Installation

npm i @reactuses/core

Related Hooks

• useClickOutside documentation
• useEventListener — for custom event handling
• useFocus — for tracking focus state

---

ReactUse provides 100+ hooks for React. Explore them all →