Ariakit
/

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.

Open preview in a new tab
Edit withViteNext.js
import "react-toastify/dist/ReactToastify.css";
import "./style.css";
import { useState } from "react";
import { Button, Dialog, DialogDismiss, DialogHeading } from "@ariakit/react";
import { ToastContainer, toast } from "react-toastify";
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>
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

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.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue