REACT COOL ONCLICKOUTSIDE

This is a React hook to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. You can check the features section to learn more.

⚡️ Live demo: https://react-cool-onclickoutside.netlify.app

❤️ it? ⭐️ it on GitHub or Tweet about it.

Features

• 🎣 Listens for clicks outside based on React hook.
• 👯‍♀️ Supports multiple refs to cover more use cases.
• 🧻 Uses passive event listeners to improve scrolling performance.
• ⛔ Scrollbar can be excluded from the callback of outside clicks.
• 🙈 Ignores certain elements during the event loop.
• 🙉 Enables you to stop listening for outside clicks when needed.
• 🪟 Detects iframe clicks for better DX.
• 🔩 Supports custom refs for some reasons.
• 📜 Supports TypeScript type definition.
• 🗄️ Server-side rendering compatibility.
• 🦔 Tiny size (< 1kB gzipped). No external dependencies, aside for the react.

Requirement

To use react-cool-onclickoutside, you must use react@16.8.0 or greater which includes hooks.

Installation

This package is distributed via npm.

$ yarn add react-cool-onclickoutside
# or
$ npm install --save react-cool-onclickoutside

Usage

Common use case.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const Dropdown = () => {
  const [openMenu, setOpenMenu] = useState(false);
  const ref = useOnclickOutside(() => {
    setOpenMenu(false);
  });

  const handleClickBtn = () => {
    setOpenMenu(!openMenu);
  };

  return (
    <div>
      <button>Button</button>
      {openMenu &amp;&amp; <div>Menu</div>}
    </div>
  );
};

Support multiple refs. Callback only be triggered when user clicks outside of the registered components.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [showTips, setShowTips] = useState(true);
  const ref = useOnclickOutside(() => {
    setShowTips(false);
  });

  return (
    <div>
      {showTips &amp;&amp; (
        &lt;&gt;
          <div>Tooltip 1</div>
          <div>Tooltip 2</div>
        
      )}
    </div>
  );
};

Ignore Elements by CSS Class Name

You can tell react-cool-onclickoutside to ignore certain elements during the event loop by the ignore-onclickoutside CSS class name. If you want explicit control over the class name, use the ignoreClass option.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

// Use the default CSS class name
const App = () => {
  const ref = useOnclickOutside(() => {
    // Do something...
  });

  return (
    <div>
      <div>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div>
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

// Use your own CSS class name
const App = () =&gt; {
  const ref = useOnclickOutside(
    () =&gt; {
      // Do something...
    },
    {
      ignoreClass: "my-ignore-class", // Or ["class-1", "class-2"]
    }
  );

  return (
    <div>
      <div>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div>
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

Disabling the Event Listener

In case you want to disable the event listener for performance reasons or fulfill some use cases. We provide the disabled option for you. Once you set it to true, the callback won’t be triggered.

import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    { disabled }
  );

  const handleBtnClick = () => {
    setDisabled(true);
  };

  return (
    <div>
      <button>
        Stop listening for outside clicks
      </button>
      <div>I'm a 🍎</div>
    </div>
  );
};

Use Your Own ref

In case of you had a ref already or you want to share a ref for other purposes. You can pass in the ref instead of using the one provided by this hook.

const ref = useRef();

useOnclickOutside(
  () => {
    // Do something...
  },
  { refs: [ref] }
);

Detecting Iframe Clicks

Clicks on an `