Unlock the Power of React Portals: A Step-by-Step Guide
Are you tired of dealing with z-index issues and DOM hierarchy limitations in your React applications? Look no further! React Portals provide a powerful solution to render components outside of their parent containers, giving you more control over your application’s layout and user experience.
Getting Started with Create React App
To get started, create a new React app using the Create React App boilerplate or set up your own React app. Change into the app directory and start the React app.
Building a Simple Modal Component
We’ll create two components: a ReactPortal component that creates a portal and renders content outside of the default hierarchy, and a Modal component that uses the ReactPortal to render its content.
The Modal component accepts two properties: isOpen, a boolean flag that represents the modal’s state, and handleClose, a method that is called when the modal is closed.
Creating the React Portal
A React Portal can be created using the createPortal function from react-dom. It takes two arguments: content, any valid renderable React element, and containerElement, a valid DOM element to which we can append the content.
We’ll create a new component, ReactPortal.js, and add a helper function to create an empty div with a given ID, append it to the body, and return the element.
Handling Dynamic Wrapper IDs
To handle dynamic wrapper IDs, we’ll use the useLayoutEffect hook to move the find element and creation logic into the effect, with wrapperId as the dependency. We’ll set the element to state, and when the wrapperId changes, the component will update accordingly.
Handling Effect Cleanup
We’ll add a system-created flag and set it to true when createWrapperAndAppendToBody is invoked. If the system-created flag is true, we’ll delete the element from the DOM during cleanup.
Styling the Demo Modal
Let’s add some styling to the modal to make it occupy the full viewport and center-align the content both vertically and horizontally.
Closing the Modal with the Escape Key
We’ll attach a keydown event listener to close the modal when the escape key is pressed.
Escaping the Default DOM Hierarchy
Let’s render the demo modal component in an app and control its open and close behavior using the useState hook. We’ll wrap the modal’s return JSX with ReactPortal to render it outside of the default DOM hierarchy.
Applying a Transition with CSS Transition
To adjust the transition of the modal’s opening and closing, we’ll use the CSSTransition component from react-transition-group. We’ll set the unmountOnExit property to true, so the transition will run and then the element will be removed from the DOM once the transition is complete.
Additional Use Cases for React Portals
React Portals are ideal for elements that need to appear on top of all other elements, such as profile hovercards, full-page loading screens, dropdowns, and tooltips.
Things to Note While Working with React Portals
Remember to add the portal container as the last element to avoid setting the z-index, and to order multiple portal containers correctly. Also, keep in mind that only the HTML tree structure is changed, while React component behavior and parent-child relationships remain unaffected.
By following this guide, you’ll be able to unlock the power of React Portals and take your React applications to the next level.