react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal? - reactjs

Question

I am using react portal and want to make it possible that modal closes when user clicks outside of modal. I am creating a ref inside my parent,but cannot really assign it to the modal itself as react portals arent actual DOM nodes (as I understood). I can also not wrap around this.props.children inside a div and assign it a ref inside my Modal component also, because then I cannot access and use it inside my Parent component.
What can I do? Thanks!
my modal:
import React from 'react';
import { createPortal } from 'react-dom';
const modalRoot = document.getElementById( 'modal' );
class Modal extends React.Component {
constructor( props ) {
super( props );
this.element = document.createElement( 'div' );
}
componentDidMount() {
modalRoot.appendChild( this.element );
}
componentWillUnmount() {
modalRoot.removeChild( this.element );
}
render() {
return createPortal(this.props.children, document.querySelector('#modal'));
}
}
the parent component rendering modal:
class Parent extends React.Component {
constructor (props) {
super(props);
this.state = {
showModal: false
};
this.modal=React.createRef();
}
showModal = () => {
this.setState({
showModal: !this.state.showModal
})
};
closeModal = (e) => {
if (this.modal.current.contains(e.target)) {
return;
} else {
this.showModal()
}
}
componentDidMount () {
document.addEventListener('click', this.closeModal, false)
}
componentWillUnmount() {
document.removeEventListener('click', this.closeModal, false)
}
render () {
const {src, height, width} = this.props;
return (
<React.Fragment>
<img
className="image"
src={src}
onClick={this.showModal}
/>
{
this.state.showModal ? (
<Modal>
<div className="my-modal">
<h1 >Heading</h1>
<p>Lorem ipsum </p>
<button
className="modal-close"
onClick={this.showModal}
>X
</button>
</div>
</Modal>
) : null
}
</React.Fragment>
)
}
};

Answer 1

Since the click listener will be applied to all modal instances, I'd move the listener and the ref to a reuseable modal component -- now it'll control clicks once opened. The only thing it really needs is a passed down toggle modal function prop from the parent.
Working example:
components/Modal/index.js
import React, { Fragment, PureComponent } from "react";
import { createPortal } from "react-dom";
import PropTypes from "prop-types";
class Modal extends PureComponent {
componentDidMount() {
document.addEventListener("click", this.closeModal, false);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeModal, false);
}
closeModal = ({ target }) => {
if (this.modal && !this.modal.contains(target)) {
this.props.toggleModal();
}
};
render = () =>
createPortal(
<Fragment>
<div className="overlay" />
<div className="window-container">
<div className="modal-container">
<div ref={node => (this.modal = node)} className="modal">
{this.props.children}
</div>
</div>
</div>
</Fragment>,
document.body
);
}
Modal.propTypes = {
children: PropTypes.node.isRequired,
toggleModal: PropTypes.func.isRequired
};
export default Modal;
components/Parent/index.js
import React, { Component } from "react";
import Modal from "../Modal";
class Parent extends Component {
state = {
showModal: false
};
toggleModal = () => {
this.setState(prevState => ({
showModal: !prevState.showModal
}));
};
render = () => (
<div className={`${this.state.showModal ? "blur" : undefined} app`}>
<img
src="https://i.imgur.com/BGwgr3A.jpg"
className="image"
alt="example.png"
onClick={this.toggleModal}
/>
{this.state.showModal && (
<Modal toggleModal={this.toggleModal}>
<h1 className="title">Hello!</h1>
<p className="subtitle">There are two ways to close this modal</p>
<ul>
<li>Click outside of this modal in the grey overlay area.</li>
<li>Click the close button below.</li>
</ul>
<button
className="uk-button uk-button-danger uk-button-small"
onClick={this.toggleModal}
>
Close
</button>
</Modal>
)}
</div>
);
}
export default Parent;
styles.css
.app {
text-align: center;
margin-top: 20px;
}
.blur > img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
}
.image {
display: block;
margin: 0 auto;
cursor: pointer;
width: 600px;
}
.modal {
max-width: 600px;
max-height: calc(100% - 96px);
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
overflow-y: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
border-radius: 4px;
background-color: #fff;
text-align: left;
}
.modal-container {
opacity: 1;
-webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-o-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
outline: none;
}
.overlay {
opacity: 1;
-webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-o-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
position: fixed;
-ms-touch-action: none;
touch-action: none;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
.subtitle {
margin: 0;
text-align: center;
font-weight: bold;
}
.title {
text-align: center;
}
.window-container {
text-align: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
outline: 0;
-webkit-animation: fadeIn 0.2s 0s ease-in-out forwards;
animation: fadeIn 0.2s 0s ease-in-out forwards;
z-index: 100;
}