Create React Portal via Ref

ONLINECAST

2 min read

·

05-10-2024

9

0

Share

Mastering React Portals: Using Refs for Dynamic Component Placement

React Portals offer a powerful way to render components outside of their parent's DOM hierarchy. This allows you to position components in different parts of your application, even outside the main app container. While the standard approach uses the ReactDOM.createPortal method, this article explores a more dynamic and flexible way to create React Portals using references (refs).

The Problem: Imagine you want to display a modal component that sits on top of the entire application. You might try adding it directly to the main app container, but this will make it difficult to manage z-index and style the overlay effect.

The Solution: React Portals with Refs: Using refs, we can dynamically create a portal target element and render the modal inside it. This approach offers several benefits:

• Flexibility: Create portals at any point in your application, not just during initial rendering.
• Control: Precisely manage the portal's placement by referencing specific DOM elements.
• Reusability: The code can be easily adapted for different modal types or other components requiring portal placement.

Here's how it works:

import React, { useRef, useState } from 'react';
import ReactDOM from 'react-dom/client';

function Modal() {
  return (
    <div className="modal">
      <div className="modal-content">
        {/* Modal content goes here */}
      </div>
    </div>
  );
}

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

  const handleClick = () => {
    setShowModal(true);
  };

  if (showModal && modalRef.current) {
    return (
      <div className="app">
        <button onClick={handleClick}>Open Modal</button>
        <div ref={modalRef} /> {/* Portal target */}
        {/* Render the modal inside the portal */}
        {ReactDOM.createPortal(<Modal />, modalRef.current)}
      </div>
    );
  }

  return (
    <div className="app">
      <button onClick={handleClick}>Open Modal</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Breakdown:

1. modalRef: We create a ref to hold a reference to the target DOM element where we want to render the portal.
2. showModal: A state variable to control the modal's visibility.
3. handleClick: Toggles the showModal state to control the portal's display.
4. Conditional Rendering: The modal is rendered only when showModal is true.
5. Portal Creation: We use ReactDOM.createPortal to render the Modal component inside the modalRef.current element, which acts as the portal target.

Benefits of using Refs:

• Dynamic Placement: You can change the portal target dynamically based on user interactions or application logic.
• Specificity: Target specific elements for your portals, providing greater control over positioning.
• Clean Separation: Keep your modal logic separate from the main app component, promoting code organization.

Example Use Cases:

• Tooltips: Render tooltips near the target element.
• Dropdowns: Create dynamic menus that appear below the trigger element.
• Custom Overlays: Render interactive overlays for specific UI elements.

Remember: While this approach offers flexibility, it's essential to be aware of potential performance impacts. If you're working with large or complex portals, consider optimizing their rendering.

Conclusion:

Using refs to create React Portals provides a powerful and dynamic way to control the placement and behavior of your components. This technique allows for greater flexibility and control compared to the traditional ReactDOM.createPortal method. By leveraging this approach, you can enhance the user experience and create engaging and interactive user interfaces.