[Added] Modal Close on right click at overlay

README.md

@@ -93,6 +93,7 @@ function App() {
         isOpen={modalIsOpen}
         onAfterOpen={afterOpenModal}
         onRequestClose={closeModal}
+        onOverlayRightClick={closeModal}
         style={customStyles}
         contentLabel="Example Modal"
       >

docs/index.md

@@ -52,6 +52,12 @@ import ReactModal from 'react-modal';
   /* Function that will be run when the modal is requested
      to be closed (either by clicking on overlay or pressing ESC).
      Note: It is not called if isOpen is changed by other means. */}
+
+  onOverlayRightClick={
+    handleRequestCloseFunc
+    /* Function that will be run when the modal is requested
+     to be closed (either by right clicking on overlay or pressing ESC).
+     Note: It is not called if isOpen is changed by other means. */}
 
   closeTimeoutMS={
     0

examples/basic/app.js

@@ -16,7 +16,8 @@ const examples = [
   Forms,
   MultipleModals,
   NestedModals,
-  ReactRouter
+  ReactRouter,
+  ModalClose
 ];
 
 class App extends Component {

examples/basic/modal_close_right_click/index.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import Modal from "react-modal";
+
+class ModalClose extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  toggleModal = (event) => {
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+  handleRightClick = (event) => {
+    this.setState({ isOpen: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={this.toggleModal}
+        >
+          Open Modal
+        </button>
+        <Modal
+          isOpen={this.state.isOpen}
+          onOverlayRightClick={this.handleRightClick}
+        >
+          <h1>Click Right on the Overlay to close the modal</h1>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={this.toggleModal}
+          >
+            Close
+          </button>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Modal close on right click",
+  app: ModalClose,
+};

examples/bootstrap/app.js

@@ -39,6 +39,7 @@ class App extends Component {
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.handleModalCloseRequest}
+          onOverlayRightClick={this.handleModalCloseRequest}
         >
           <div className="modal-content">
             <div className="modal-header">

src/components/Modal.js

@@ -66,6 +66,7 @@ class Modal extends Component {
     ]),
     onAfterOpen: PropTypes.func,
     onRequestClose: PropTypes.func,
+    onOverlayRightClick: PropTypes.func,
     closeTimeoutMS: PropTypes.number,
     ariaHideApp: PropTypes.bool,
     shouldFocusAfterRender: PropTypes.bool,
@@ -100,7 +101,8 @@ class Modal extends Component {
     preventScroll: false,
     parentSelector: () => document.body,
     overlayElement: (props, contentEl) => <div {...props}>{contentEl}</div>,
-    contentElement: (props, children) => <div {...props}>{children}</div>
+    contentElement: (props, children) => <div {...props}>{children}</div>,
+    onOverlayRightClick: ()=>null
   };
 
   static defaultStyles = {

src/components/ModalPortal.js

@@ -55,6 +55,7 @@ export default class ModalPortal extends Component {
     onAfterOpen: PropTypes.func,
     onAfterClose: PropTypes.func,
     onRequestClose: PropTypes.func,
+    onOverlayRightClick: PropTypes.func,
     closeTimeoutMS: PropTypes.number,
     shouldFocusAfterRender: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
@@ -299,6 +300,14 @@ export default class ModalPortal extends Component {
     this.shouldClose = null;
   };
 
+  handleOverlayRightClick = event => {    
+      if(event.target == this.overlay)
+      {
+        event.preventDefault();
+        this.props.onOverlayRightClick(event);
+      }
+  };
+
   handleContentOnMouseUp = () => {
     this.shouldClose = false;
   };
@@ -375,7 +384,8 @@ export default class ModalPortal extends Component {
       className: this.buildClassName("overlay", overlayClassName),
       style: { ...overlayStyles, ...this.props.style.overlay },
       onClick: this.handleOverlayOnClick,
-      onMouseDown: this.handleOverlayOnMouseDown
+      onMouseDown: this.handleOverlayOnMouseDown,
+      onContextMenu: this.handleOverlayRightClick,
     };
 
     const contentProps = {