DOM

useClickAnyWhere

Run a handler on every click anywhere in the document.

Demo

live · imported from hookli

Click anywhere on the page

clicks: 0
last position: —

Fires for every click in the document — handy for dismissing popovers or logging outside interactions without wiring a ref.

import { useState } from "react";
import { useClickAnyWhere } from "hookli";

export function Demo() {
  const [clicks, setClicks] = useState(0);

  useClickAnyWhere(() => setClicks((prev) => prev + 1));

  return <p>Document clicks: {clicks}</p>;
}

Usage

use-click-any-where.tsxtsx

import { useState } from "react";
import { useClickAnyWhere } from "hookli";

export function Demo() {
  const [clicks, setClicks] = useState(0);

  useClickAnyWhere(() => setClicks((prev) => prev + 1));

  return <p>Document clicks: {clicks}</p>;
}

API

useClickAnyWhere.d.tsts

useClickAnyWhere(handler: (event: MouseEvent) => void): void

Parameters

Name	Type	Default	Description
handler	(event: MouseEvent) => void	—	Called with the MouseEvent on every document-wide click. The latest handler is always used — no stale closure.

Returns

This hook returns nothing.

Hook

The implementation, straight from hookli. Copy it, or install the package.

src/hooks/use-click-any-where/use-click-any-where.tstsx

import { useEventListener } from "../use-event-listener/use-event-listener";

export const useClickAnyWhere = (
  handler: (event: MouseEvent) => void,
): void => {
  useEventListener("click", handler);
};

View source on GitHub