react-notification-manager

Setup

Typical usage involves wrapping your entire app with a <NotificationProvider>:

import * as React from "react";
import ReactDOM from "react-dom";
import { NotificationProvider } from "react-notification-manager";
import App from "./App";
 
ReactDOM.render(
    <NotificationProvider>
        <App />
    </NotificationProvider>,
    document.getElementById("root")
);

Now you can use useNotificationManager to create notifications.

import * as React from "react";
import { useNotificationManager } from "react-notification-manager";
 
// Your own Dialog component
import Dialog from "./your-app/dialog";
 
function App() {
    const { createNotification } = useNotificationManager();
 
    return (
        <button
            onClick={createNotification(({ close }) => (
                <Dialog onClose={close} />
            ))}>
            Open Dialog
        </button>
    );
}