use-click-out

A custom React hook to fire an event when user clicks outside the component.

Install

npm i @bscop/use-click-out

Usage

import useClickOut from "@bscop/use-click-out";

const App = () => {
  const ref = useClickOut(
    () => {
      console.log("Click out of #demo");
    }
  );

  return (
    <div id="#demo" ref={ref}>
      App!
    </div>
  );
};

useClickOut accepts a second optional parameter; it can be:

• a boolean - set to false if the listener should not be active (default is true).

• an object, with shape { active ?: boolean; ref: React.RefObject<HTMLElement> } - this is useful in case you already have ref.

Contribute

Read the guidelines.

Run tests

npm test

Coverage

Coverage reports are hosted on codecov.

npm run badge:coverage -- --token=<guid>

---

Bruno Scopelliti
www.brunoscopelliti.com