loading...

✨ Introducing react-cool-onclickoutside: A React hook to listen for clicks outside of the component(s).

wellyshen profile image Welly Updated on ・3 min read

react-cool-onclickoutside 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 explore the features section to learn more.

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

Features

Usage

Common use case.

import React, { 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 onClick={handleClickBtn}>Button</button>
      {openMenu && <div ref={ref}>Menu</div>}
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

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

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

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

  return (
    <div>
      {showTips && (
        <>
          <div ref={ref}>Tooltip 1</div>
          <div ref={ref}>Tooltip 2</div>
        </>
      )}
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

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 React, { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

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

  return (
    <div>
      <div ref={ref}>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div className="ignore-onclickoutside">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

// Use the CSS class name that you defined
const App = () => {
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    { ignoreClass: "my-ignore-class" }
  );

  return (
    <div>
      <div ref={ref}>I'm a 🍕</div>
      <div>Click me will trigger the event's callback</div>
      <div className="my-ignore-class">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

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 as true, the callback won’t be triggered.

import React, { 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 onClick={handleBtnClick}>
        Stop listening for outside clicks
      </button>
      <div ref={ref}>I'm a 🍎</div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

For more details, please check the GitHub: https://github.com/wellyshen/react-cool-onclickoutside

You can also install this package is distributed via npm.

$ yarn add react-cool-onclickoutside
# or
$ npm install --save react-cool-onclickoutside
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
ericgruby01 profile image
Eric Gruby

Nice! That's a super useful hook. Thank you 🙂

Collapse
wellyshen profile image
Welly Author

Thank you bro 👍🏻