Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Snackbar via notistack
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { SnackbarProvider, withSnackbar } from 'notistack';
import CheckIcon from 'mdi-material-ui/Check';
import ErrorIcon from '@material-ui/icons/Error';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import WarningIcon from '@material-ui/icons/Warning';
const styles = theme => {
return {
// inotistack - snackbar configuration
variantSuccess: { backgroundColor: theme.status.accepted },
variantError: { backgroundColor: theme.status.rejected },
variantWarning: { backgroundColor: theme.status.flagged },
variantInfo: { backgroundColor: theme.status.pending },
};
};
const setupVariant = (enqueueSnackbar, variant, defaultOptions = {}) => (
message,
submessage = null,
options = {}
) => {
if (!submessage) return enqueueSnackbar(message, { variant, ...options });
return enqueueSnackbar(
<div style={{ display: 'inline-block', verticalAlign: 'top' }}>
<div style={{ fontWeight: 'bold', marginBottom: '0.3em' }}>{message}</div>
<div style={{ fontWeight: 'normal' }}>{submessage}</div>
</div>,
{ variant, ...defaultOptions, ...options }
);
};
const GlobalSnackbar = withSnackbar(({ enqueueSnackbar, closeSnackbar }) => {
if (!window.snackbar) {
var action = key => (
<Button
onClick={() => closeSnackbar(key)}
style={{
color: '#fff',
fontSize: '2em',
marginRight: '-0.5em',
padding: 0,
minWidth: '2em',
minHeight: '2em',
}}>
&times;
</Button>
);
// enable global interface for showing snackbar items.
window.snackbar = {
success: setupVariant(enqueueSnackbar, 'success', { action }),
error: setupVariant(enqueueSnackbar, 'error', { action }),
warning: setupVariant(enqueueSnackbar, 'warning', { action }),
info: setupVariant(enqueueSnackbar, 'info', { action }),
sticky: {
success: setupVariant(enqueueSnackbar, 'success', { action, persist: true }),
error: setupVariant(enqueueSnackbar, 'error', { action, persist: true }),
warning: setupVariant(enqueueSnackbar, 'warning', { action, persist: true }),
info: setupVariant(enqueueSnackbar, 'info', { action, persist: true }),
},
};
}
return null;
});
export const Snackbar = ({ children, classes }) => {
const { variantSuccess, variantError, variantWarning, variantInfo } = classes;
return (
<SnackbarProvider
maxSnack={4}
dense
preventDuplicate
classes={{ variantSuccess, variantError, variantWarning, variantInfo }}
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
iconVariant={{
success: <CheckIcon style={{ marginRight: '0.6em' }} />,
error: <ErrorIcon style={{ marginRight: '0.6em' }} />,
warning: <WarningIcon style={{ marginRight: '0.6em' }} />,
info: <ThumbUpIcon style={{ marginRight: '0.6em' }} />,
}}>
<GlobalSnackbar />
{children}
</SnackbarProvider>
);
};
export default withStyles(styles)(Snackbar);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment