React — Portals

Basic Portal

import { createPortal } from 'react-dom';

function Modal({ children, onClose }) {
    return createPortal(
        <div className="modal-overlay">
            <div className="modal">
                <button onClick={onClose}>Close</button>
                {children}
            </div>
        </div>,
        document.body
    );
}

Using Portals

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div>
            <button onClick={() => setShowModal(true)}>Open Modal</button>

            {showModal && (
                <Modal onClose={() => setShowModal(false)}>
                    <h2>Modal Content</h2>
                    <p>This is rendered outside the DOM tree.</p>
                </Modal>
            )}
        </div>
    );
}

Portal Examples

// Tooltip
function Tooltip({ children, content }) {
    return (
        <div className="tooltip-container">
            {children}
            {createPortal(
                <div className="tooltip">{content}</div>,
                document.body
            )}
        </div>
    );
}

// Dropdown menu
function Dropdown({ trigger, children }) {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className="dropdown">
            <div onClick={() => setIsOpen(!isOpen)}>{trigger}</div>
            {isOpen && createPortal(
                <div className="dropdown-menu">
                    {children}
                </div>,
                document.body
            )}
        </div>
    );
}

// Toast notifications
function ToastContainer({ toasts }) {
    return createPortal(
        <div className="toast-container">
            {toasts.map(toast => (
                <div key={toast.id} className="toast">
                    {toast.message}
                </div>
            ))}
        </div>,
        document.body
    );
}

When to Use Portals

1. Modals and dialogs
2. Tooltips
3. Dropdown menus
4. Toast notifications
5. Loading overlays

Mini Practice

Write React code that:

1. Creates a modal with portal
2. Renders a tooltip outside DOM
3. Creates a dropdown menu
4. Implements toast notifications

Up Next

Next: Learn about Suspense.