supachat/src/Contexts/SnackbarContext.js

import { useState, createContext, useContext } from 'react';
import { Snackbar, Alert } from '@mui/material';

const SnackbarContext = createContext();

const SnackbarProvider = ({ children }) => {
  const initialSnack = { show: false, severity: 'info', msg: '' };
  const [snack, setSnack] = useState(initialSnack);

  const showSnackBar = (severity, msg) => {
    setSnack({
      ...snack,
      show: true,
      severity,
      msg,
    });
  };

  const handleSnackClose = (event, reason) => {
    if (reason === 'clickaway') return;
    setSnack(initialSnack);
  };

  return (
    <SnackbarContext.Provider value={{ showSnackBar }}>
      <Snackbar
        open={snack.show}
        autoHideDuration={6000}
        onClose={handleSnackClose}
      >
        <Alert
          onClose={handleSnackClose}
          severity={snack.severity}
          sx={{ width: '100%' }}
        >
          {snack.msg}
        </Alert>
      </Snackbar>
      {children}
    </SnackbarContext.Provider>
  );
};

const useSnackbar = () => {
  const context = useContext(SnackbarContext);

  if (!context)
    throw new Error('useSnackbar must be used within an SnackBarProvider');

  return context;
};

export { SnackbarProvider, useSnackbar };