Dialog with React-Toastify

Showing notification toasts using libraries like react-toastify and react-hot-toast while keeping a modal Dialog open with the getPersistentElements prop.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
import * as Ariakit from "@ariakit/react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./style.css";

function Example() {
  const dialog = Ariakit.useDialogStore();
  return (
    <div className="wrapper">
      <Ariakit.Button className="button" onClick={() => toast("Hello!")}>
        Say Hello
      </Ariakit.Button>
      <Ariakit.Button className="button" onClick={dialog.show}>
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        store={dialog}
        backdrop={<div className="backdrop" />}
        getPersistentElements={() => document.querySelectorAll(".Toastify")}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Notification
        </Ariakit.DialogHeading>
        <p className="description">
          Click on the button below to show a toast.
        </p>
        <div className="buttons">
          <Ariakit.Button className="button" onClick={() => toast("Hello!")}>
            Say Hello
          </Ariakit.Button>
          <Ariakit.DialogDismiss className="button secondary">
            Cancel
          </Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Example />
      <ToastContainer className="toast-container" />
    </>
  );
}

Keeping toasts accessible

Using the getPersistentElements prop, you can keep the modal dialog and the notification toasts accessible at the same time. Users will be able to navigate between the dialog and the persistent elements using the Tab key and interact with the toasts without closing the modal dialog.

<Dialog getPersistentElements={() => document.querySelectorAll(".Toastify")} />

Note that the elements returned by this function must be present in the DOM when the dialog is open.