import Snackbar from '@mui/material/Snackbar'; import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert'; // snackbar states const [snackbarSeverity, setSnackbarSeverity] = React.useState('success'); const [snackbarOpen, setSnackbarOpen] = React.useState(false); const [snackbarMessage, setSnackbarMessage] = React.useState(''); const handleSnackbarClose = () => { // Handle the closing here setSnackbarOpen(false); }; try { const response = await trackPromise(api.saveUserRegistrationInformation(formData)); // console.log('user reg response:', response?.data?.itemGUID); if (response?.data?.Output?.isAlreadyExists) { setSnackbarMessage('User already exists'); setSnackbarSeverity('error'); setSnackbarOpen(true); } else { dispatch(setUserInfo(response?.data?.Output?.itemGUID)); setSnackbarMessage('User registered successfully'); setSnackbarSeverity('success'); setSnackbarOpen(true); setShowModal(true); } } catch (error) { setSnackbarMessage('An error occurred while submitting user registration'); setSnackbarSeverity('error'); setSnackbarOpen(true); } // place snackbar at end of root jsx element. for example if parent jsx element is <main>, // place snackbar at the end of <main> element. <Snackbar open={snackbarOpen} autoHideDuration={2000} onClose={handleSnackbarClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} > <MuiAlert onClose={handleSnackbarClose} variant="filled" elevation={6} severity={snackbarSeverity as MuiAlertProps['severity']} sx={{ width: '100%' }} > {snackbarMessage} </MuiAlert> </Snackbar>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter