OutSideClick React

outsideclick-react is a lightweight React package that detects clicks outside a specified element, useful for dropdowns, modals, etc.

Installation

npm install outsideclick-react

or

yarn add outsideclick-react

Usage

Hook

import { useOutsideClick } from "outsideclick-react";

function MyComponent() {
  const handleOutsideClick = (e) => {
    // Handle outside click
  };
  const ref = useOutsideClick(handleOutsideClick);
  /* const ref = useOutsideClick(handleOutsideClick, ".ignore-element") */
  return <div ref={ref}>{/* Your component */}</div>;
}

Component

import { OutsideClick } from "outsideclick-react";

function MyComponent() {
  return (
    <OutsideClick
      onOutsideClick={() => {
        // Handle outside click
      }}
      ignoreElement=".ignore"
    >
      <div>{/* Your component */}</div>
    </OutsideClick>
  );
}

API

useOutsideClick

A hook that detects clicks outside of a specified element.

Parameters:

• outsideClick: (v: HTMLElement) => void - A function that gets called when an outside click is detected.
• ignoreElement (optional): IgnoreElementType - An element or selector that should be ignored when detecting outside clicks.

Returns:

• A ref object that should be attached to the target element.

OutsideClick

A component that detects clicks outside of its children.

Props:

• onOutsideClick: Function that is called when an outside click is detected.
• ignoreElement: An element or selector to ignore when detecting outside clicks.

Contribution

If you'd like to contribute, please submit a pull request.

Support

If you want to support my work, you can buy me a coffee!