Documentation
useClickAnyWhere

useClickAnyWhere

The useClickAnyWhere hook allows you to execute a function whenever a click event occurs anywhere in the document. This can be useful for implementing features like closing a modal or dropdown when the user clicks outside of it.

Usage

First, you need to import the useClickAnyWhere hook from the kitchn package.

import { useClickAnyWhere } from "kitchn";

Example

Here is an example of how to use the useClickAnyWhere hook in a component:

Click anywhere on the document and check the console.

Code Editor
() => {
  const handleClick = (event) => {
    console.log("Clicked somewhere on the document", event);
  };

  useClickAnyWhere(handleClick);

  return (
    <p>Click anywhere on the document and check the console.</p>
  );
};

Parameters

The useClickAnyWhere hook accepts the following parameter:

NameTypeDescription
handler(event: Event) => voidA function to be called whenever a click event occurs.

Return Value

The useClickAnyWhere hook does not return any value.

Last updated on