Crafting Modal in ReactJS: A Quick Guide Using HTML <dialog> & React Portals
Tags: react, a11y, ui, tutorial
Published: 2023-08-26 11:45:27

<figure>
  <figcaption>Cover Photo by <a href="https://unsplash.com/@logan_lense?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Logan Moreno Gutierrez</a> on <a href="https://unsplash.com/photos/70ter_ma2j0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></figcaption>
</figure>

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!

{% codepen https://codepen.io/mike-at-redspace/pen/VwqvNWy %}

***

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:


![screenshot of the code for Modal.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5li3e8792l700400mrcn.png)

***

## 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:

![screenshot of the code for App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35th9r4z4sbyhplnuvxq.png)

***

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.

{% user mike-at-redspace %}

<figure>
  <figcaption>
If you're interested in diving deeper, I highly recommend checking out the blog post titled [Building a dialog component](https://web.dev/building-a-dialog-component/) by Adam Argyle. This post delves into the intricacies of designing modal dialogs that not only meet accessibility standards but also provide an outstanding user experience.
  </figcaption>
</figure>