Skip to content

Commit

Permalink
Add support for mounted modals
Browse files Browse the repository at this point in the history
  • Loading branch information
james-manley committed Jul 22, 2021
1 parent b6ac4c7 commit 437a565
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
35 changes: 35 additions & 0 deletions src/components/html/Modal/ModalPortal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from "react";
import * as ReactDOM from "react-dom";

export default class ModalPortal extends React.Component {
constructor(props) {
super(props);
this.portalElement = null;
}

componentDidMount() {
var p = document.createElement('div');
p.id = this.props.portalId;
document.body.appendChild(p);

this.portalElement = p;

this.componentDidUpdate();
}

componentWillUnmount() {
document.body.removeChild(this.portalElement);
ReactDOM.unmountComponentAtNode(this.portalElement)
}

componentDidUpdate() {
ReactDOM.render(
<React.Fragment>{this.props.children}</React.Fragment>,
this.portalElement
);
}

render() {
return null;
}
}
19 changes: 19 additions & 0 deletions src/components/html/Modal/MountedModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";
import ModalPortal from "./ModalPortal";
import Modal from "./Modal";

export default class MountedModal extends React.Component {
render() {
if (this.props.show === false) {
return null;
}

return <ModalPortal portalId="react-modal-container">
<Modal style={{display: 'block'}} className="in">
{this.props.children}
</Modal>

<div className="modal__backdrop in" />
</ModalPortal>
}
}

0 comments on commit 437a565

Please sign in to comment.