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