Crafting Modal in ReactJS: A Quick Guide Using HTML <dialog> & React Portals

Modal dialogs are an indispensable tool in web applications, streamlining user interactions & providing a place for focused interactions. In this quick post, we'll delve into creating accessible modal dialogs in ReactJS using the new HTML <dialog> element and React Portals.

By combining the native capabilities of HTML5 with React's adaptability, we can construct modal dialogs that not only function smoothly but also cater to all users, including those who rely on screen readers.

Here’s a live demo of what we’re going to build!

Before we delve into the implementation, let's highlight the two key ingredients we'll be using:

HTML <dialog> Element

The <dialog> element, an inherent feature of HTML5, enables the creation of modal dialogs sans external libraries. It offers a straightforward way to overlay content atop the current page, preventing interaction with the underlying content until the dialog is dismissed.

React Portals

React Portals provide a mechanism to render components outside the regular DOM hierarchy. This is particularly handy when dealing with components like modal dialogs that require precise positioning relative to the viewport or other elements.

Let's start crafting an accessible modal dialog component by combining the strengths of the HTML <dialog> element and React Portals.

Create the Modal Component

Assuming your React project is up and running, go ahead and create a new file named Modal.js. Here's a snippet to get you started:

Styling and Accessibility Considerations

When building modal dialogs, several factors need attention: keyboard navigation, focus management, meaningful information for screen readers. Take note of the following considerations in the example:

• The <h2> element with the id "dialog-title" serves as a descriptive title for the dialog.
• The "Close" button is not only adorned with a meaningful label but also carries a CSS class for effortless styling.
• An aria-modal attribute signifies that the dialog is indeed modal.

Integrate the Component

Now, it's time to integrate your freshly baked Modal component into your main application file (often App.js). Don't forget to include a button to trigger the opening of the modal dialog. Here's how it might look:

In this quick post, we've combined the HTML <dialog> element and React Portals to craft modal dialogs that seamlessly integrate accessibility, functionality.

This approach also comes with some SEO benefits. Search engines favour accessible and well-structured content, boosting your website's visibility and search rankings.

Also, when it comes to choosing a rendering approach, React Portals emerge as the superior choice. They facilitate clean code separation, maintaining the integrity of your application's architecture.

Happy coding, as you transform your web applications into hubs of accessibility and SEO excellence! Here's to hoping your users find your new Modal more user friendly then those GDPR "we use cookies" pop-ups.

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS