useClickOutside custom hook

a simple custom hook to check when the user click outside an specified component

Installation

Install it from npm with your favorite package manager!

npm install use-awesome-click-outside

or:

yarn add use-awesome-click-outside

or:

pnpm install use-awesome-click-outside

usage

   import { useClickOutside } from 'use-awesome-click-outside';

   export const Component = () => {
   // pass the type of the HTML you will use here!
   const ref = useClickOutside<HTMLDivElement>(() => console.log('clicked outside!'));
   return (
    <div ref={ref}>
      <h1>Hello World! 🫡</h1>
    </div>
  );
};

Deep into the hook

this hook return the ref that you will need to pass on your html, this ref will check if the user is clicking outside the HTML, if it is re will call the function that you pass as parameter