ReactJS – Portals
React Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component. This can be especially useful for cases where a component needs to visually break out of its container, such as modals, tooltips, or dropdowns.
Example of React Portals
Let’s create a basic example to understand how React Portals work. We will create a simple modal component that uses a portal to render outside of its parent component.
Step 1: Setting Up the HTML
First, ensure you have a div with an id of modal-root in your HTML. This will serve as the destination for our portal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Portals Example</title>
</head>
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
</html>Step 2: Creating the Modal Component
Next, create the modal component that will use a portal to render its children into the modal-root.
import React from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children, onClose }) => {
return ReactDOM.createPortal(
<div style={modalStyle}>
<div style={modalContentStyle}>
{children}
<button onClick={onClose}>Close</button>
</div>
</div>,
document.getElementById('modal-root')
);
};
const modalStyle = {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
const modalContentStyle = {
backgroundColor: 'white',
padding: '20px',
borderRadius: '5px',
textAlign: 'center'
};
export default Modal;Step 3: Using the Modal Component
Now, create a parent component that uses the Modal component. We’ll include a button to open the modal and handle the state to show or hide it.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Modal from './Modal';
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
return (
<div style={appStyle}>
<h1>React Portals Example</h1>
<button onClick={openModal}>Open Modal</button>
{isModalOpen && <Modal onClose={closeModal}>This is a modal!</Modal>}
</div>
);
};
const appStyle = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '50px'
};
ReactDOM.render(<App />, document.getElementById('root'));Explanation
- HTML Setup: We have two divs in the HTML, one for the React app (
root) and one for the modal (modal-root). - Modal Component: The
Modalcomponent usesReactDOM.createPortalto render its children into themodal-rootdiv. It also includes basic styles for a modal background and content. - App Component: The
Appcomponent manages the state to show or hide the modal. When the modal is open, it renders theModalcomponent, passing a function to close the modal.
This example demonstrates how React Portals allow you to render components outside their usual DOM hierarchy, making them ideal for UI elements like modals that need to overlay other content.