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.
You can install the package using npm or yarn:
npm install use-click-away-react
or
yarn add use-click-away-react
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;
useClickAwaycallback: () => 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.clickAwayRef: RefObject<T extends HTMLElement | null> - A React ref object to be assigned to the target element.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=
>
Click outside this dropdown to close it.
</div>
);
}
function App() {
return (
<div>
<h1>Click Away Hook Example</h1>
<Dropdown />
</div>
);
}
export default App;
The package is written in TypeScript and includes type definitions.
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
MIT