Not able to show notification inside the modal using Notistack MUI in React JS

Question

Hi I am using react with MUI. For showing Notifications I am using a a library called as notistack. Here, on failure of API I want to show an error message in the dialog. Here is the below code :

index.jsx :

 <React.StrictMode>
      <SnackbarProvider>
        <App />
      </SnackbarProvider>
    </React.StrictMode>

In the below component I want to show an error message .

export default function ConfirmationDialog({
  isOpen,
  title,
  content,
  onClose,
  cancellable = true,
}) {
  return (
    <Dialog
      onClose={onClose}
      aria-labelledby="confirmation-dialog-title"
      open={isOpen}
      disableEscapeKeyDown={!cancellable}
      fullWidth
      maxWidth="sm"
    >
      <DialogTitle id="confirmation-dialog-title">
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems={"center"}
        >
          <Typography variant="h2">{title}</Typography>
          {cancellable && (
            <IconButton aria-label="close" onClick={onClose}>
              <CloseIcon />
            </IconButton>
          )}
        </Stack>
      </DialogTitle>
      <DialogContent>{content}</DialogContent>
    </Dialog>
  );
}

I have the following hook I created :

import { useSnackbar } from "notistack";

import { autoHideDuration } from "configuration";

    export function useCustomSnackbar() {
      const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    
      const showAlert = ({ variant, message }) => {
        enqueueSnackbar(message, {
          variant,
          anchorOrigin: {
            vertical: "top",
            horizontal: "center",
          },
          autoHideDuration: autoHideDuration,
        });
      };
    
      return showAlert;
    }

Now I am trying to use it like this :

onSuccess: () => {
        showAlert({
          message: "The record has been created successfully",
          variant: "success",
        });

        setIsAddDialogOpen(false);
      },

This shows the snackbar at the top of the page. Now, when it comes to showing the snackbar inside the modal , I am not able to show that. As Modal is an independent component . How do I use this hook to show the notification inside modal ?

Answer 1

Snackbars have a massive z-index and a fixed position so that they'll always visually "break out" of the structure of your app and float on top of everything else. As such, it doesn't really make sense to try to display one inside of another component—the purpose of the Snackbar is that it doesn't sit inside of other UI elements.

Instead, I'd recommend using an Alert component, which serves a similar function but is intended to be positioned inside of the document flow.

Here's a very basic POC showing an Alert inside a Modal—I believe this more or less what you're looking for: https://codesandbox.io/s/vigilant-dirac-2w4lkn?file=/src/Demo.js