This content originally appeared on DEV Community and was authored by Vishal Gaurav
Hello everyone, in this first blog of mine I am going to show how to create modal using React Portal. Modal at first seems to be another React component we can make but implementing a modal properly teaches us a cool concept in React which is React Portals.
First question, what is React Portal?
Quoting straight from the docs it says -
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Now, let's try to get what rendering outside the parent component means and how Portal solve this issue?
When we render any component in react it is rendered inside the parent component which forms a tree like hierarchy. In some cases we might want to render our component to a completely different node which is outside our parent. This is where this special feature of react helps.
Second question, why do we need a Portal for a modal?
Modal is something which is expected to open on top of everything. If we render the modal within the page(component) we are on then it will be not easy to write CSS such that the modal is on top of everything and in centre.
Sure, we can do something like this(which I have seen some developers doing) at the outer most layer.
export default function App() {
const [modalOn, setModalOn] = useState(true);
return (
<div>
{modalOn && <ConfirmationModal />}
//rest of the app
//
</div>
);
}
Using this method we can show/hide the modal component from the outermost layer and pass the props down or use something like redux or context API for keeping the modal state global.
Sure, this approach works but it has some flaws
- There is a need to keep the state global for modal/ pass the props down
- The modal component need to be defined away from the component we are on, the Modal cannot reside inside same component. This is where React Portal comes to rescue Now let's try to understand how to implement a modal and see how it works.
1) Add a div to index.html for modal. This will be the modal root where we will be rendering our modals.
<div id="portal-root"></div>
2) Create a PortalForModal component.
import "./portal-for-modal.css";
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom"; //import createPortal
export const PortalForModal = ({ children, dismiss }) => {
const elRef = useRef(null); //initilaize with null
if (!elRef.current) {
elRef.current = document.createElement("div");
}
useEffect(() => {
const portalRoot = document.getElementById("portal-root");
portalRoot.appendChild(elRef.current);
//appending the portal first time component is rendered.
return () => {
portalRoot.removeChild(elRef.current);
//cleanup- removing the node to prevent memory leak.
};
}, []);
return createPortal(
<div//the div covering entire screen where we can place click
//listeners for the modal to close (this is optional)
className="portal-overlay"
onClick={() => {//placing a click listener to this div to
//close the modal
dismiss((showModal) => !showModal);
}}
>
<div className="portal" onClick={(e) => e.stopPropagation()}>
{children}
</div>
</div>,
elRef.current// the dom node we want to render to(here- portal-root)
);
};
I understand, I understand that much too much code for once. Let's try to get what component is about and what it is doing?
-
PortalForModalcan be said as a wrapper component which when wrapped around any component will render the enclosed components inside a React Portal. It receives two props children and the dismiss function(used to close the modal). -
elRefis the container that will be holding our Portal. We instantiate it with adiv. Upon the first render of component, we are appending our portal container(elRef.current) to the DOM node(here, portalRoot) using
appendChild. We are also doing the necessary clean-up function when the component un-mounts i.e. removing the container from the DOM usingremoveChild.Finally we are using the magical functional provided by react that is
createPortal. It takes the two arguments child and container.Our child here is a
divelement with class name 'portal-overlay'. Inside this div we have another div with class-name 'portal' which renders our children passed down into ourPortalForModalcomponent.The container is the
elRef.currentwhich is simply a div which we created.The div spanning the whole page, one with class-name of 'portal-overlay' has also a click listener on it. So clicking on this div invokes the dismiss function which was also passed as a prop into out component.
3) Add some CSS styling to our component. Include a file named 'portal-for-modal.css'.I will not be covering CSS in detail here.
.portal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 50px;
border: 2px solid;
}
.portal-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
}
All this CSS is doing is
- Spanning a background div throughout the page and giving it a background blur.
- Centering the portal div to the exact of page using fixed positioning and translate.
4) Finally get to use the Portal component for our Modal!
export default function App() {
const [modalOn, setModalOn] = useState(false);
return (
<div className="App">
<button id="button" onClick={() => setModalOn((prev) => !prev)}>
Show Modal
</button>
<div id="big-text">This is an example of modal using react portals.</div>
{modalOn && (
<PortalForModal dismiss={setModalOn}>
<p style={{ textAlign: "center", margin: "1rem" }}>
This modal is rendered on a dom node outside the current root node.
</p>
<p style={{ textAlign: "center", margin: "1rem" }}>
You can click the below button or area outside this modal to close
it.
</p>
<button
onClick={() => {
setModalOn((prev) => !prev);
}}
>
Close Modal
</button>
</PortalForModal>
)}
</div>
);
}
-
modalOnis a react state local to the component which decides if the modal will be shown or not. - Passing the
setModalOnasdismissprop to Portal component. - Rendering whatever we want to inside out modal(here, a button and two
<p>'s) without defining them somewhere else.
5) Ultimately, the code demo
Hope you enjoyed my first blog. Please do leave your feedback and suggestions if you read it till here.
Good Luck!
This content originally appeared on DEV Community and was authored by Vishal Gaurav
Vishal Gaurav | Sciencx (2022-06-15T18:30:12+00:00) How to create modal using React Portal?. Retrieved from https://www.scien.cx/2022/06/15/how-to-create-modal-using-react-portal/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.