---
title: "useClickAway – Element Hook Usage & Examples (Alias for useClickOutside)"
description: "Listen for clicks outside of an element. Alias for useClickOutside. Useful for modal or dropdown."
canonical: https://reactuse.com/element/useclickaway/
---

# useClickAway

Listen for clicks outside of an element. Useful for modal or dropdown.

:::info
`useClickAway` is an alias for [`useClickOutside`](/element/useClickOutside). They have identical functionality and API.
:::

`useClickAway` detects clicks (mouse and touch events) that occur outside of a referenced DOM element and invokes a callback when they happen. Pass a ref to the element you want to protect and a handler function. You can also pass an `enabled` flag to conditionally activate or deactivate the listener.

### When to Use

- Closing dropdown menus, popovers, or modals when the user clicks outside of them
- Deselecting or deactivating an inline editing component when focus moves away
- Dismissing notification toasts or context menus on outside interaction

### Notes

- **Event types**: Listens for both `mousedown` and `touchstart` events, covering desktop and mobile interactions.
- **Cleanup**: The event listeners are automatically removed when the component unmounts or when `enabled` is set to `false`.
- This hook is an alias for `useClickOutside`. Use whichever name you prefer -- they share the same implementation.

## Usage

```tsx live
function Demo() {
  const [visible, setVisible] = useState(false);

  const modalRef = useRef<HTMLDivElement>(null);

  useClickAway(modalRef, () => {
    setVisible(false);
  });

  return (
    <div>
      <button onClick={() => setVisible(true)}> Open Modal</button>
      {visible && (
        <div
          ref={modalRef}
          style={{
            position: "fixed",
            left: "50%",
            top: "50%",
            transform: "translate(-50%,-50%)",
            width: 420,
            maxWidth: "100%",
            zIndex: 10,
            border: "1px solid var(--c-input-border)",
            background: "var(--c-bg)",
          }}
        >
          <div
            style={{
              padding: "0.4em 2em",
              boxShadow: "2px 2px 10px var(--c-box-shadow)",
            }}
          >
            <p
              style={{
                fontWeight: 700,
                fontSize: "1.4rem",
                marginBottom: "2rem",
              }}
            >
              Demo Modal
            </p>
            <p>Click outside of the modal to close it.</p>
          </div>
        </div>
      )}
    </div>
  );
};

```

%%API%%