diff --git a/README.md b/README.md index 16e59399..7d85f29a 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,7 @@ function App() { isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={closeModal} + onOverlayRightClick={closeModal} style={customStyles} contentLabel="Example Modal" > diff --git a/docs/index.md b/docs/index.md index 4e8a296e..7b40e2e3 100644 --- a/docs/index.md +++ b/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 diff --git a/examples/basic/app.js b/examples/basic/app.js index 6854916d..ba3076f3 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -16,7 +16,8 @@ const examples = [ Forms, MultipleModals, NestedModals, - ReactRouter + ReactRouter, + ModalClose ]; class App extends Component { diff --git a/examples/basic/modal_close_right_click/index.js b/examples/basic/modal_close_right_click/index.js new file mode 100644 index 00000000..a580b12c --- /dev/null +++ b/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 ( +