react-outside-click-handler

What is react-outside-click-handler?

The react-outside-click-handler package is a React component that helps you detect and handle clicks outside of a specified element. This is particularly useful for implementing features like closing dropdowns, modals, or tooltips when a user clicks outside of them.

What are react-outside-click-handler's main functionalities?

Basic Outside Click Handling

This feature allows you to detect clicks outside of a specified element. The `onOutsideClick` prop is used to define the function that will be called when an outside click is detected.

import React from 'react';
import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  const handleOutsideClick = () => {
    console.log('Clicked outside!');
  };

  return (
    <OutsideClickHandler onOutsideClick={handleOutsideClick}>
      <div>
        Click outside of this div to trigger the handler.
      </div>
    </OutsideClickHandler>
  );
}

export default MyComponent;

Nested Outside Click Handling

This feature demonstrates handling nested outside click events. You can have multiple `OutsideClickHandler` components nested within each other, each with its own `onOutsideClick` handler.

import React from 'react';
import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  const handleOutsideClick = () => {
    console.log('Clicked outside the outer div!');
  };

  const handleInnerOutsideClick = () => {
    console.log('Clicked outside the inner div!');
  };

  return (
    <OutsideClickHandler onOutsideClick={handleOutsideClick}>
      <div>
        Outer Div
        <OutsideClickHandler onOutsideClick={handleInnerOutsideClick}>
          <div>
            Inner Div
          </div>
        </OutsideClickHandler>
      </div>
    </OutsideClickHandler>
  );
}

export default MyComponent;

Other packages similar to react-outside-click-handler

react-onclickoutside

The react-onclickoutside package provides a higher-order component (HOC) that can be used to wrap any component and detect clicks outside of it. It is similar to react-outside-click-handler but uses a different approach by wrapping the component with an HOC.

react-click-outside

The react-click-outside package is another alternative that provides a higher-order component for handling outside clicks. It is similar in functionality to react-outside-click-handler but offers a different API and implementation.

use-onclickoutside

The use-onclickoutside package is a React hook that allows you to detect clicks outside of a specified element. It is a more modern approach compared to react-outside-click-handler, leveraging React hooks for a more functional programming style.

README

react-outside-click-handler

A React component for handling outside clicks

Usage

import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  return (
    <OutsideClickHandler
      onOutsideClick={() => {
        alert('You clicked outside of this component!!!');
      }}
    >
      Hello World
    </OutsideClickHandler>
  );
}

Props

children: PropTypes.node.isRequired

Since the OutsideClickHandler specifically handles clicks outside a specific subtree, children is expected to be defined. A consumer should also not render the OutsideClickHandler in the case that children are not defined.

Note that if you use a Portal (native or react-portal) of any sort in the children, the OutsideClickHandler will not behave as expected.

onOutsideClick: PropTypes.func.isRequired

The onOutsideClick prop is also required as without it, the OutsideClickHandler is basically a heavy-weight <div />. It takes the relevant clickevent as an arg and gets triggered when the user clicks anywhere outside of the subtree generated by the DOM node.

disabled: PropTypes.bool

If the disabled prop is true, outside clicks will not be registered. This can be utilized to temporarily disable interaction without unmounting/remounting the entire tree.

useCapture: PropTypes.bool

See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture for more information on event bubbling vs. capture.

If useCapture is true, the event will be registered in the capturing phase and thus, propagated top-down instead of bottom-up as is the default.

display: PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])

By default, the OutsideClickHandler renders a display: block <div /> to wrap the subtree defined by children. If desired, the display can be set to inline-block, inline, flex, or contents instead. There is no way not to render a wrapping <div />.

Changelog

v1.3.0

• [New] display: add contents (#34)
• [New] display: add inline (#28)
• [Refactor] Replace componentWillReceiveProps with componentDidUpdate for a side effect (#36)
• [Deps] update airbnb-prop-types
• [Dev Deps] update enzyme-adapter-react-helper, eslint, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-with-styles, rimraf, safe-publish-latest, sinon-sandbox; add eslint-plugin-react-hooks