Use Cases for React Portals

React Portals are a powerful feature in the React library that allows developers to render components outside the main DOM hierarchy of a parent component. They help in addressing common UI issues that improve user experience while maintaining the logic of React’s component model. In this article, we will explore various use cases for React Portals, the benefits they provide, and how to implement them in your projects.

What are React Portals?

Introduced in React 16, Portals provide a way to render children into a DOM node that exists outside of the parent component’s DOM hierarchy. This is particularly useful for situations where you need to break out of the container structure imposed by the parent.

Using Portals, the React elements can be rendered at the end of the body or any other container, allowing for better control over styling and layout.

import ReactDOM from 'react-dom';

function MyPortalComponent() {
    return ReactDOM.createPortal(
        

            This is rendered outside the main component hierarchy!
        
,
        document.getElementById('portal-root') // Our target DOM node
    );
}

Why Use React Portals?

There are several scenarios where React Portals shine in enhancing the structure and usability of your application:

• Overlay and Modals: Easily render overlays or modals that require different stacking contexts.
• Tooltips: Display tooltips or dropdowns outside their parent component container.
• Notifications: Show global notifications that need to be positioned relative to the viewport.
• Contextual Toolbars: Allow certain UI elements like toolbars to be rendered independently of their parent.

1. Modals

One of the most common use cases for React Portals is to create modals. Modals often require precise control over their display and should overlay other UI elements seamlessly. By maintaining them in a separate DOM node, we can avoid style conflicts and issues with z-index.

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

    return ReactDOM.createPortal(
        

            
 e.stopPropagation()}>
                
Hello, from the Modal!
                Close
            
        
,
        document.getElementById('modal-root') // Assume we have a div with this id
    );
}

2. Tooltips

Tooltips can often be problematic when they are rendered inside their immediate container. They can be cut off or may not appear correctly when scrolling. By using Portals for tooltips, we can ensure they are rendered at the correct position with respect to the viewport.

function Tooltip({ text, children }) {
    const [visible, setVisible] = React.useState(false);
    const tooltipRef = React.useRef();

    const showTooltip = () => setVisible(true);
    const hideTooltip = () => setVisible(false);

    return (
        

            {children}
            {visible && ReactDOM.createPortal(
                

                    {text}
                
,
                document.body // Rendering at the end of the body
            )}
        
    );
}

3. Notifications

When building applications that require notifications (like success messages, alerts, or error warnings), using Portals helps in positioning these elements effectively wherever necessary, without altering your component hierarchy. They can appear in a dedicated notifications area on the screen.

function Notification({ message }) {
    return ReactDOM.createPortal(
        

            {message}
        
,
        document.getElementById('notification-root')
    );
}

4. Contextual Toolbars

Sometimes, you may want a toolbar that operates independently of its container, perhaps to offer different functionalities or controls based on the context of the application. Using a portal allows you to render this component separately, offering greater flexibility in positioning.

function Toolbar() {
    return ReactDOM.createPortal(
        

            Action 1
            Action 2
        
,
        document.getElementById('toolbar-root')
    );
}

5. Nested Portals

It’s also possible to create nested Portals, allowing for even deeper flexibility. This works the same way as other components but ensures that each portal is independent in its rendering, accommodating more complex UI designs.

function NestedPortal() {
    return ReactDOM.createPortal(
        

            
Parent Portal
            {ReactDOM.createPortal(
                
Nested Portal Content
,
                document.getElementById('nested-portal-root')
            )}
        
,
        document.getElementById('parent-portal-root')
    );
}

Conclusion

React Portals offer a powerful and flexible solution for rendering components outside the normal DOM flow of their parent components. This feature is particularly valuable for creating modals, tooltips, notifications, and more, enhancing the overall user experience while simplifying the component structure.

By leveraging Portals, you can give your applications a polished look with better performance and cleaner code. Experiment with these use cases in your projects, and watch how they improve the organization and functionality of your UI components.

Happy coding!