How to use Portals in React?

Introduction to React Portals

React Portals provide a powerful solution for rendering components outside the parent component’s DOM hierarchy. This feature, introduced in React 16, is particularly useful for when you need to break out of the DOM tree without losing component functionalities. This guide will take you through the nuances of using React Portals, with practical examples and best practices.

Understanding React Portals

A React Portal allows you to render a component into a DOM node that resides outside the current component’s hierarchy. This is especially useful for modals, tooltips, and any floating UI elements which you want to render outside the parent container to prevent CSS clashes and layout issues.

Creating Your First React Portal

Creating a portal is straightforward in React. You use the ReactDOM.createPortal() method.

const JottupPortal = ({ children, container }) => {
    return ReactDOM.createPortal(
        children,
        container
    );
};
            

This code snippet creates a Portal component that can be used to render the children into a different part of the DOM specified by container.

Practical Use Case: Modals

One common use case for portals is rendering modals. The modal component can be rendered into a portal to ensure it’s on top of other UI elements.

function JottupModal({ isOpen, onClose, children }) {
    if (!isOpen) return null;

    return ReactDOM.createPortal(
        

            Close
            {children}
        
,
        document.body
    );
}
            

This modal will be rendered directly into the body element, regardless of where the JottupModal component is declared in the React tree.

Event Bubbling in Portals

An interesting aspect of portals is that even though the component is rendered outside the parent’s DOM hierarchy, events bubble up in the React tree as if the component were still located in its parent.

Best Practices and Considerations

When using portals, it’s important to manage the lifecycle of the portal’s target DOM node and ensure proper accessibility for modal dialogs. Handle keyboard focus and screen reader compatibility to ensure a good user experience for all users.

Conclusion: Expanding Your React Horizons with Portals

React Portals offer a unique way to manage complex UI elements in a cleaner and more efficient manner. By understanding how to effectively use portals, you can enhance your React applications, providing a more flexible and dynamic user experience.