Mastering React Portals: A Comprehensive Guide and Tutorial

In the world of React, creating dynamic user interfaces is a common requirement. Sometimes, you need to render components outside of their parent hierarchy or create overlays like modals or tooltips. In such cases, React Portals come to the rescue. In this tutorial, we'll dive into React Portals, understanding what they are and how to use them effectively to build dynamic and versatile UI components.

What are React Portals?

Imagine you have a React component deep within your component tree, but you want to render something from that component at the top level of your DOM hierarchy. This is where React Portals shine. React Portals provide a way to render a component's children in a different part of the DOM tree, outside of the parent's hierarchy.

Advantages of React Portals

• Isolation: Portals allow you to isolate certain UI components from the rest of your application, making it easier to manage complex UI scenarios.

• Layering: You can create overlays, modals, and tooltips that appear on top of other content, without being constrained by the component hierarchy.

• Accessibility: Portals enable you to improve the accessibility of your UI by rendering content where it makes the most sense in the DOM.

• Clean Code: Portals help keep your component logic clean and focused, as you can separate UI rendering concerns from the parent component.

Practical Case

Let's dive into a practical example of using React Portals to create a modal component.

Step 1 : Make a modal component

1// Modal.js
2
3import React, { useEffect, useState } from 'react'
4import ReactDOM from 'react-dom'
5
6const rootPortal = document.getElementById('modal-root')
7
8export const Modal = ({ children }) => {
9  const [isOpen, setIsOpen] = useState(false)
10
11  // add open and close modal logic
12
13  return ReactDOM.createPortal(
14    <div>
15      <h1>My modal</h1>
16    </div>,
17    rootPortal
18  )
19}

In this code, we create a Modal functional component that uses React Portals. It renders its children into a separate DOM node (rootPortal) outside the normal React component hierarchy.

Step 2 : Setup the portal

Now, let's use our Modal component in another part of our application.

To do this, we need to place our tag with the correct id at the top of our application. In the case of an app react, we could place it in the index.js here:

1// index.js
2
3import React from 'react';
4import ReactDOM from 'react-dom/client';
5import './index.css';
6import App from './App';
7import reportWebVitals from './reportWebVitals';
8
9const root = ReactDOM.createRoot(
10  document.getElementById('root') as HTMLElement
11);
12root.render(
13  <React.StrictMode>
14    <div className="modal-root"/>
15    <App />
16  </React.StrictMode>
17);
18
19reportWebVitals();

Step 3 : Use the Modal component

Now, let's use our Modal component in another part of our application:

1// Profile.js
2
3export const Profile = () => {
4  return (
5    <div className="profile">
6      <img src={profilePicture} className="profile-picture" alt="logo" />
7      <div className="profile-name">Your Name</div>
8      <div className="profile-bio">Your Bio</div>
9      <Modal>
10        <h1>My content</h1>
11      </Modal>
12    </div>
13  )
14}

In this case, our Modal will be teleported in the top of our app, below the <App />.

Conclusion

React Portals provide a powerful way to render components outside of their parent hierarchy, enabling you to create dynamic and versatile user interfaces. Whether you're building modals, tooltips, or other overlay components, React Portals are a valuable tool in your React development toolkit.

By mastering React Portals, you can enhance the user experience of your applications and create more interactive and engaging UIs. So, go ahead, experiment with React Portals, and unlock new possibilities for your React projects.

If you enjoyed this tutorial, please consider following me for more helpful content. Your support is greatly appreciated! Thank you!

X _brdnicolas

Happy coding!