Introduction to React.js Portals
React Portals provide a way to render components outside their normal DOM hierarchy. In React, components are usually rendered as part of their parent component’s DOM structure. However, there are situations where rendering a child component outside its parent DOM tree is necessary. This is where React Portals come in.
What is a Higher Order Component (HOC)?
A Higher Order Component is a function that takes a component and returns a new component. It allows you to separate concerns by extracting logic that can be shared across multiple components into a reusable function.
Portals allow you to render a child component into a different part of the DOM, outside of its usual parent-child relationship.
Why Use React Portals?
How to Use React Portals
React provides a method called ReactDOM.createPortal
to create a portal. This method requires two arguments:
Syntax:
ReactDOM.createPortal(child, container);
Example of Using React Portals
Let’s create a simple modal using a portal. The modal will be rendered outside of the usual DOM tree.
Step 1: Create the Modal Component
import React from 'react';
import ReactDOM from 'react-dom';
function Modal({ children, onClose }) {
return ReactDOM.createPortal(
{children}
,
document.getElementById('modal-root') // Render to 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: '8px'
};
export default Modal;
import React, { useState } from 'react';
import Modal from './Modal';
function App() {
const [isModalOpen, setModalOpen] = useState(false);
const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);
return (
Welcome to the App
{isModalOpen && This is the modal content! }
);
}
export default App;
public/index.html
file, you need to add a dedicated element where the portal will render.
React Portal Example
modal-root
div, which is separate from the main root
div where the rest of your app is rendered.
Benefits of Using React Portals
Event Bubbling and Portals
One important aspect of portals is that they do not affect event bubbling. Events triggered within a portal still propagate through the DOM as if the portal component were rendered within the parent DOM hierarchy. This means that event listeners set on ancestor components will still capture events from portal components.
For example, if a modal (rendered via a portal) triggers a click event, that event will still propagate through the normal React component hierarchy, allowing parent components to respond to it.
When Not to Use Portals
Portals should be used when you need to render content outside the regular component hierarchy. However, they are not necessary for all components. Here are some cases when not to use portals:
Conclusion
ReactDOM.createPortal
, you can maintain the logical hierarchy of your components while bypassing any layout, styling, or z-index issues caused by DOM nesting.