useClickAnyWhere for React

Q: How do I ignore clicks on one element?

Check the event in your handler and return early. event.target is the element that was clicked, so you can skip a region you mark yourself. The hook does not take a ref or an ignore list. For a dropdown that should close only on an outside click, a ref-based outside hook fits better than a global one.

Q: Does the listener block the click?

No. The listener is registered on document in the bubble phase, with no capture option. A button's onClick runs first, then your handler. The hook does not stop propagation, and it does not mark the listener passive, so your function can still read the event and decide what to do.

Listens for a click anywhere on the document and runs your handler. For React, when a page should notice every click, not just one on a control.

useClickAnyWhere attaches one click listener to the document and calls your handler with the mouse event.

Use it when any click on the page should count, not only a click on one control. Clicks outside a single element belong to useOnClickOutside. In React the listener stays up while the component is mounted, and it comes off on unmount.

PreviewCode

Clicks

Click anywhere on the page.

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { useClickAnyWhere } from "@/hooks/use-click-anywhere";

useClickAnyWhere((event) => {
  setLastClick({ x: event.clientX, y: event.clientY });
});

The listener is on the document, so a click on a button still reaches the handler after that button's own click.

FAQ

Does useClickAnyWhere fire for every click?

Yes. It listens for click on the document, so a click on a button, a link, or empty page all call your handler. It does not filter by target. If you only care about clicks outside one element, useOnClickOutside is the hook that checks a ref.

Can I use more than one useClickAnyWhere?

Yes. Each call adds its own document listener, and every one of them runs on the same click. Nothing in the hook shares a single listener between components. If many of them would do the same work, one handler with a condition inside is easier to follow than several copies.

How do I ignore clicks on one element?

Check the event in your handler and return early. event.target is the element that was clicked, so you can skip a region you mark yourself. The hook does not take a ref or an ignore list. For a dropdown that should close only on an outside click, a ref-based outside hook fits better than a global one.

Is useClickAnyWhere safe during server rendering?

Yes. The listener is added in an effect, and that effect returns immediately when window is missing, so the server render never touches document. The first client render matches. After mount, the click listener is attached, and the cleanup function removes it when the component unmounts.

Will my handler see a stale state?

No. The hook keeps the latest handler in a ref and calls that ref from the document listener. You can pass a new function each render, and the next click uses it. The listener itself is not removed and added again just because the function changed.

Does the listener block the click?

No. The listener is registered on document in the bubble phase, with no capture option. A button's onClick runs first, then your handler. The hook does not stop propagation, and it does not mark the listener passive, so your function can still read the event and decide what to do.