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. Hop you guys ❤️ it!

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

🚧 This package is still under development, API may changed frequently. Please don't use it now ✋🏼. The milestone as below:

• Triggers callback when clicks outside target area
• Use passive touch event listener to improve scrolling performance
• Support multiple refs
• Ignore callback triggered by clicks browser scrollbar
• Unit testing
• Typescript type definition
• Demo website
• Demo code
• CI/CD
• Documentation

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(true);
  };

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

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 for using 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