Use-click-away-react NPM

use-click-away-react

A custom React hook that triggers a callback when a user clicks outside a specified element. Perfect for handling interactions like closing dropdowns, modals, or popups when the user clicks away.

Installation

You can install the package using npm or yarn:

npm install use-click-away-react

yarn add use-click-away-react

Usage

Import the useClickAway hook and use it in your functional components. Pass a callback function that will be called when a click outside the target element is detected, and optionally, an array of class names to exclude from triggering the callback. If you're using typescript, don't forget to add the appropriate type parameter for the element that's subscribing to the click-away listener

import React from "react";
import { useClickAway } from "use-click-away-react";

function Example() {
  const { clickAwayRef } = useClickAway<HTMLDivElement>(() => {
    alert("Clicked outside!");
  }, ["exclude-class"]);

  return (
    <div>
      <div ref={clickAwayRef}>
        Click outside this element to trigger the callback.
      </div>
      <div className="exclude-class">
        Clicking on this element will not trigger the callback.
      </div>
    </div>
  );
}

export default Example;

API

`useClickAway`

Arguments

callback: () => void - A callback function to be invoked when a click outside the target element is detected.
excludeClasses?: string[] - An optional array of class names. Clicking on elements with these class names will not trigger the callback.

Returns

An object with a single property:
- clickAwayRef: RefObject<T extends HTMLElement | null> - A React ref object to be assigned to the target element.

Example

Here's a complete example using the useClickAway hook:

import { useClickAway } from "use-click-away-react";

function Dropdown() {
  const { clickAwayRef } = useClickAway<HTMLDivElement>(() => {
    console.log("Dropdown closed");
  });

  return (
    <div
      ref={clickAwayRef}
      style={{ border: "1px solid black", padding: "10px" }}
    >
      Click outside this dropdown to close it.
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Click Away Hook Example</h1>
      <Dropdown />
    </div>
  );
}

export default App;