What is React Portal and understand its use case?
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. The most common use cases are when the child component visually separates out from its parent component as shown below.
- Modal dialog boxes
- Tooltips
- Hovercards
- Loaders
Syntax of React Portal
In the syntax below, the first argument (child) is any component we want to render, such as an element, string, or fragment. The second argument (container) is a DOM element.
ReactDOM.createPortal(child, container)
When You Should Use a Portal
If there is one modal in its parent component, the modal will get the width and height of its parent component. For a solution, we’ll try to fix it by using a CSS property such as overflow, hidden, and z-index.
Let’s take an example.
return (
<div>
<MyModal />
<MyInputForm />
</div>
);The output will be :
<div>
<div class="my-modal">
<h2>Modal title</h2>
</div>
<form>
<input type="text" />
</form>
</div>Semantically and from a “clean HTML structure” perspective, having this nested modal isn’t ideal. It is an overlay to the entire page after all (that’s similar for side drawers, other dialogs, etc.).
So to override this problem we will use react portal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="backdrop-root"></div>
<div id="overlay-root"></div>
<div id="root"></div>
</body>
</html>So let’s add a modal in react portal.
import React from 'react';
import ReactDOM from 'react-dom';import Card from './Card';
import Button from './Button';const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onConfirm} />;
};const ModalOverlay = (props) => {
return (
<Card className={classes.modal}>
<header className={classes.header}>
<h2>{props.title}</h2>
</header>
<div className={classes.content}>
<p>{props.message}</p>
</div>
<footer className={classes.actions}>
<Button onClick={props.onConfirm}>Okay</Button>
</footer>
</Card>
);
};const ErrorModal = (props) => {
return (
<React.Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById('backdrop-root')
)}
{ReactDOM.createPortal(
<ModalOverlay
title={props.title}
message={props.message}
onConfirm={props.onConfirm}
/>,
document.getElementById('overlay-root')
)}
</React.Fragment>
);
};export default ErrorModal;
So the output of the following example will be :
return (
<div>
<MyModal />
<MyInputForm />
</div>
);Output :
<div class="my-modal">
<h2>Modal title</h2>
</div>
<div>
<form>
<input type="text" />
</form>
</div>Conclusion
You can find more information on Portals in the React official documentation.
Also for technical videos and traveling blogs you can check my youtube channel.
