react-onclickoutside

Install this Higher Order Component (HOC) if you are using React Class Components.

Note: If you are using modern React (v16+) with Functional Components and Hooks, it is recommended to implement your own logic using useEffect and useRef instead of installing this HOC.

$> npm install react-onclickoutside --save

In IE11, classList is not supported for SVG elements. If your application relies on classList for SVG elements, you must provide a shim. You can use a library like dom4 or use the following manual shim before loading your React code:

if (!("classList" in SVGElement.prototype)) {
  Object.defineProperty(SVGElement.prototype, "classList", {
    get() {
      return {
        contains: className => {
          return this.className.baseVal.split(" ").indexOf(className) !== -1;
        }
      };
    }
  });
}

To use the HOC with a class component, wrap your component with onClickOutside. The wrapped component must implement a handleClickOutside(evt) method. The HOC will then call this method whenever a click occurs outside the component's boundaries.

import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  handleClickOutside = evt => {
    // ..handling code goes here...
  };
}

export default onClickOutside(MyComponent);

If you are using CommonJS, you must access the .default property because the library is bundled as an ES6 module.

// .default is needed because library is bundled as ES6 module
var onClickOutside = require("react-onclickoutside").default;
var createReactClass = require("create-react-class");

// create a new component, wrapped by this onclickoutside HOC:
var MyComponent = onClickOutside(
  createReactClass({
    // ...,
    handleClickOutside: function(evt) {
      // ...handling code goes here...
    }
    // ...
  })
);

By default, the HOC listens for mousedown and touchstart. You can change this behavior using the eventTypes prop on the wrapped component.

• Pass a single string for one event type.
• Pass an array of strings for multiple event types.

You can prevent certain elements from triggering an 'outside click' event by giving them a specific CSS class.

By default, the HOC ignores any element with the class ignore-react-onclickoutside. You can customize this class name using the outsideClickIgnoreClass prop.

By default, clicks on the document scrollbar are treated as outside clicks. To ignore scrollbar clicks, use the excludeScrollbar property.

This can be passed as a prop to a specific component instance or as a default configuration for all instances via the second argument of onClickOutside.

// As a prop on a specific instance
<EnhancedComponent excludeScrollbar={true} />

// As a default configuration for all instances
var clickOutsideConfig = {
  excludeScrollbar: true
};
var EnhancedComponent = onClickOutside(MyComponent, clickOutsideConfig);

You can control whether the component is actively listening for outside clicks using the disableOnClickOutside prop.

• Setting disableOnClickOutside={true} prevents the component from setting up event listeners.
• To enable listening, ensure the prop is false or omitted.

Note: Avoid calling enableOnClickOutside() or disableOnClickOutside() inside componentDidMount or componentWillMount as it is considered an anti-pattern. Instead, use the disableOnClickOutside prop.

import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  // ...
  handleClickOutside(evt) {
    // ...
  }
}
var EnhancedComponent = onClickOutside(MyComponent);

class Container extends Component {
  render() {
    return <EnhancedComponent disableOnClickOutside={true} />;
  }
}

If your component does not implement handleClickOutside directly on the instance (or if you are using TypeScript and want to explicitly define the handler), you can pass a configuration object as the second argument to onClickOutside. This object should contain a handleClickOutside function that returns the handler from the component instance.

import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  // ...
  myClickOutsideHandler(evt) {
    // ...handling code goes here...
  }
  // ...
}

var clickOutsideConfig = {
  handleClickOutside: function(instance) {
    return instance.myClickOutsideHandler;
  }
};

var EnhancedComponent = onClickOutside(MyComponent, clickOutsideConfig);

Choose the appropriate version of react-onclickoutside based on your React version:

Note: Only the latest version receives updates and bug fixes.