Using native dialog for your React modal

Many devs have to create modals with React in their day-to-day work. Usually, you create as a backdrop and then 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 . According to documentation, the 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. 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 ( {header} {children} ); } 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(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 ( Open Modal Some data ); 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 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 or any other element of your choice inside the like: {header} {children} And all main styles for our dialog should go to that and background of element better

Mar 27, 2025 - 15:42

Using native dialog for your React modal

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

Usually, you create

as a backdrop and then

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

. According to documentation, the 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. 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 (
        
                {header}
                {children}
        
    );
}

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(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 (
        <>
            
            
                        Some text


                }>
                
                    Some data

);

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

or any other element of your choice inside the like:


            
                {header}
                {children}

And all main styles for our dialog should go to that

and background of 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

element and not the
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 ;)