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.

Dialog Button

Edit example

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
import { Button, Dialog, DialogDismiss, DialogHeading } from "@ariakit/react";
import { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./style.css";

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

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

import { Button, Dialog, DialogDismiss, DialogHeading } from "@ariakit/react";
import { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./style.css";

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

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

Components

DialogOpen a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

View all components

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")} />
<Dialog getPersistentElements={() => document.querySelectorAll(".Toastify")} />