DEV Community: Olexandra Imereli

Using native dialog for your React modal

Olexandra Imereli — Thu, 27 Mar 2025 14:38:59 +0000

Many devs have to create modals with React in their day-to-day work.

Usually, you create <div> as a backdrop and then <div> as modal and send some props there to handle opening and closing. Then you have to think about accessibility for your users to navigate through the modal, close it, etc. But NOW we have native dialog that will help us to do so easier and with less code.

We have HTML <dialog>. According to documentation, the <dialog> element is exposed by browsers like custom dialogs that use the ARIA role="dialog" attribute. So we don't need to set it right now. <dialog> elements invoked by the showModal() method implicitly have aria-modal="true", so again, less work for us. But be aware elements invoked by the show() method or displayed using the open attribute or by changing the default display of a are exposed as [aria-modal="false"].(about usefulness of this next time)

Now, let us move to the code.
Here is how we define our dialog component in React:

import React, { useRef } from "react";
import { styles } from "./dialogStyle.css";

interface DialogProps {
    children: React.ReactNode;
    ref: React.HTMLDialogElement;
    header: React.ReactNode;
}

export default function Dialog({ header, ref, children }: DialogProps) {
    return (
        <dialog

            ref={ref}>
                {header}
                {children}
        </dialog>
    );
}

We using Typescript for type safety here, defining reference to be able to access this dialog. Header just in case you need header and pass children to make it as flexible as possible.

But how can we open and close this native dialog? Cause using pure js will look like this:

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

For this purpose, let's create a custom hook and call it useDialog:

import React, { useRef, useCallback } from "react";

export function useDialog() {
    const dialogRef = useRef<React.HTMLDialogElement | null>(null);

    const openDialog = useCallback(() => {
        dialogRef.current?.showModal();
    }, []);

    const closeDialog = useCallback(() => {
        dialogRef.current?.close();
    }, []);

    return {
        openDialog,
        closeDialog,
        dialogRef
    };
}

We have here a reference for any modal that we will be controlling and functions to open and close, and we again using here native methods for this.

So to use it all together will be looking at something like this:

const { openDialog, closeDialog, dialogRef } = useDialog();

    return (
        <>
            <button onClick={openDialog}>               Open Modal
            </button>
            <Dialog
                ref={dialogRef}
                header={
                    <div >
                        <div >Some text</div>
                        <button onClick={closeDialog} >
                            Close Dialog
                        </button>
                    </div>
                }>
                <div >
                    Some data
                </div>
            </Dialog>
        </>
    );

And here, we control our dialog outside of it.
This is all for a simple setup for using native dialog.
But what about styling? We can style what we path to dialog itself in the usual way using Tailwind, for example. But what should we do if we need to style a backdrop?

We can style it using the next pseudo elements:

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.2);
}

To style dialog itself:

dialog:open {
    background-color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: center;
    align-self: center;
}

This will center dialog appearance in case you reset default styles for your application.
By the way, if you set the flex or block style for your dialog like <dialog className="flex"> dialog will stay on a page and won't be reflected on the close event.

The next interesting thing I must mention.
Let's assume we need to close the modal by clicking on the backdrop; how can we achieve this?
We extend our useModal hook with the next code:

useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {

            if (dialogRef.current && event.target === dialogRef.current) {
                closeDialog();
            }
        };

        const dialogElement = dialogRef.current;

        if (dialogElement) {
            dialogElement.addEventListener("click", handleClickOutside);
        }

        return () => {
            if (dialogElement) {
                dialogElement.removeEventListener("click", handleClickOutside);
            }
        };
    }, []);

We track if we clicking on the whole dialog as ::backdrop pseudo-element live under dialog, and we can't access it with js. But we will end up closing the modal even by clicking inside the modal. So how to fix it? There is a trick: we should add <div> or any other element of your choice inside the <dialog> like:

<dialog style={styles} ref={ref}>
            <div>
                {header}
                {children}
            </div>
        </dialog>

And all main styles for our dialog should go to that <div> and background of <dialog> element better to make invisible. This will prevent the closing dialog if we click inside the modal, as the click event will be executed on <div> element and not the <dialog>
We can check it to set console.log

console.log(dialogRef.current, event.target);
            if (dialogRef.current && event.target === dialogRef.current) {
                closeDialog();
            }

This will show us next if we click inside the modal:

And we will close the modal ether by clicking the close button or on the backdrop, and Esc button still will be working.

Some points for conclusion:

Browser Compatibility: The element is widely supported in modern browsers. Check MDN for the latest compatibility information.

Non-Modal Dialogs: The show() method creates a non-modal dialog, which doesn't block interaction with the rest of the page. Non-modal dialogs do not have a backdrop, and the Escape key does not close them automatically.

Form Submission: The element can work with forms. A form button with method="dialog" will close the dialog and optionally return a value

PS: By the way, your QA will thank you for using native HTML dialog ;)

How to make a hole in
or a little about mix-blend-mode

Olexandra Imereli — Thu, 06 Feb 2025 09:20:12 +0000

Our company started updating the app and of course, updating the designs. Designers come and say: We thought and thought and came up with this modal:

What is a modal like a modal but not everything is so simple. The middle part of the modal should also be transparent and the outlines of the site background should be visible there.

For example, we will not create just such a modal, but a simplified one. So the HTML will look like this:

<div class="modal">
  <div class="header">
    <span class="header-text">
      Some text
    </span>
    <span class="close-button">&#x2715;</span>
  </div>
  <div class="content">
    <p>
      Some content
    </p>
  </div>
</div>

The basic CSS is as follows:

.modal {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(50px);
  max-width: 400px;
  max-height: 600px;
  padding: 8px;
  gap: 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.header-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 8px;
}
.close-button {
  color: #fff;
}

.content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(50px);
  color: #fff;
  height: 200px;
}

The background card is arbitrary. The colors for the modal are taken from the designers' mockups in Figma and should be exactly like this. Otherwise, the dreaded QA will come and say that your color is wrong.

The result is as follows:

We see that our central div is not transparent and not very light despite the fact that it is white. What should we do so that the designers and QA do not beat us?

mix-blend-mode will come to our aid.

What is mix-blend-mode? MDN tells us that it is a property that sets how the content of an element should be combined with the content of the parent element and the background of the element.

mix-blend-mode has many options:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

Some of them are similar to Instagram filters and can be used to make cool backgrounds.

We will need mix-blend-mode:lighten;

To fix our modal we wrap our modal content in another

and we get:

<div class="cover">
   <div class="content">
       <p>
          Some content
       </p>
   </div>
 </div>

Next, we make the background transparent and add our mix-blend-mode.

.cover{
  background: transparent;
  mix-blend-mode: lighten;
}

The background colors are mixed so that we actually now have a “transparent hole” in the middle of the image through which we can see the outlines of the background, and on top is the color that the designers asked us to use.

I do not exclude that there are other options for doing this, but today we will talk about this method of achieving the desired result.

DEV Community: Olexandra Imereli

Using native dialog for your React modal

How to make a hole in or a little about mix-blend-mode

How to make a hole in
or a little about mix-blend-mode