react-cool-onclickoutside

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.com

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

Features

• 🎣 Listen for clicks outside based on React hook.
• 👯‍♀️ Support multiple refs to cover more use cases.
• 🧻 Uses passive event listeners to improve scrolling performance.
• ⛔️ Scrollbar can be excluded from clicks outside callback.
• 📜 Support TypeScript type definition.
• 🗄️ Server-side rendering friendly.
• 🦠 Tiny size (~ 645B 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 useOnclickOutside from 'react-cool-onclickoutside';

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

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

  return (
    <div>
      <div onClick={handleClickBtn}>Button</div>
      {openMenu && <div ref={registerRef}>Menu</div>}
    </div>
  );
};

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

import useOnclickOutside from 'react-cool-onclickoutside';

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

  return (
    <div>
      {showTips && (
        <>
          <Tooltip ref={registerRef} />
          <Tooltip ref={registerRef} />
        </>
      )}
    </div>
  );
};

API

const registerRef = useOnclickOutside(callback[, options]);

Parameters

You must pass the callback to use this hook and you can access the MouseEvent or TouchEvent via the event parameter as below.

const callback = event => {
  console.log('Event: ', event);
};

The options object may contain the following keys.

Key	Type	Default	Description
eventTypes	Array	['mousedown', 'touchstart']	Which events to listen for.
excludeScrollbar	boolean	false	Whether or not to listen (ignore) to browser scrollbar clicks.

Return

A function to register the component(s) that useOnclickOutside hook should target to.

Inspiration

• react-onclickoutside

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Welly 💻 📖 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!