useClickAnyWhere

Events & gestures

A lightweight React hook for detecting document-wide click events

Install

$ npm install @usefy/use-click-any-where

Quick start

useClickAnyWhere.tsx

import { useClickAnyWhere } from "@usefy/use-click-any-where";

function ClickTracker() {
  const [lastClick, setLastClick] = useState({ x: 0, y: 0 });

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

  return (
    <div>
      Last click: ({lastClick.x}, {lastClick.y})
    </div>
  );
}

API reference

`useClickAnyWhere(handler, options?)`

A hook that listens for document-wide click events.

Parameters

Parameter	Type	Description
`handler`	`(event: MouseEvent) => void`	Callback function called on every document click
`options`	`UseClickAnyWhereOptions`	Configuration options

Options

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Whether the event listener is active
`capture`	`boolean`	`false`	Use event capture phase instead of bubble
`passive`	`boolean`	`undefined` (browser default)	Mark the listener as passive. A passive listener cannot call `event.preventDefault()`. Left unset by default (non-passive) — there is no performance benefit for `click`, so only set it if you specifically want passive semantics.

Returns

void

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →