Customization
Variants are an easy way to display snackbars that are visually different. Notistack comes with 5 variants out of the box: default
, success
, error
, warning
and info
. These variants may not be suitable for your application. For example, you may want to use the colors from your application's theme.
Depending on your requirements, you have 2 ways of customizing the Snackbars:
1. Override styles - Suitable for small changes (e.g. changing background color)
2. Create custom components - See custom components to find out how you can customize each variant, or define your own variants.
// globally set the variant for all snackbars
<SnackbarProvider>
<App />
</SnackbarProvider>
const message = 'Your notification here'
enqueueSnackbar(message, { variant: 'default' })
// OR simply: enqueueSnackbar(message)
By default, Notistack displays an icon in each Snackbar, according to their variant. Use iconVariant
prop to display an icon of your choice, or hide them altogether using hideIconVariant
.
<SnackbarProvider>
<App />
</SnackbarProvider>
By default, the styling of Snackbars is based on Material Design Snackbars. It would makes sense to override styles, if all you need is to make small changes (for example, change error
variant background color).
To do this, you can import notistack's Material Snackbar and override its styles. The class names are called: notistack-MuiContent
and notistack-MuiContent-<variant_name>
import { MaterialDesignContent } from 'notistack'
const StyledMaterialDesignContent = styled(MaterialDesignContent)(() => ({
'&.notistack-MuiContent-success': {
backgroundColor: '#2D7738',
},
'&.notistack-MuiContent-error': {
backgroundColor: '#970C0C',
},
}));
<SnackbarProvider
Components={{
success: StyledMaterialDesignContent,
error: StyledMaterialDesignContent,
}}
>
By default, the styling of Snackbars is based on Material Design Snackbars. But the sky is your limit when it comes to customization.
You can define your own variants
and show entirely customized Snackbars. A custom component accepts all props passed toenqueueSnackbar
or SnackbarProvider
, so you have full control over it. Passing additional options in options parameter of enqueueSnackbar
is also supported. This is achieved by specifying a mapping between variant names and their custom components in the Components
prop.
import ReportCompleteSnackbar from './ReportComplete'
<SnackbarProvider
Components={{
reportComplete: ReportCompleteSnackbar,
}}
>
<App />
</SnackbarProvider>
enqueueSnackbar('Your report is ready', {
variant: 'reportComplete',
persist: true,
allowDownload: true, // <-- pass any additional options
})
In order for transitions to work as expected, your custom component has to:
Forward the ref using
React.forwardRef
- const MySuccessSnackbar = () => <div /> + const MySuccessSnackbar = React.forwardRef((props, ref) => + <div {...props} ref={ref} />) <SnackbarProvider Components={{ success: MySuccessSnackbar }} />
Forward the
style
- const MySnackbar = () => <div /> + const MySnackbar = ({ style, ...otherProps }) => <div style={style} />
Be a single element (
React.Fragment
is not allowed)const MySnackbar = () => ( - <React.Fragment> + <div> <div>your report is ready</div> <button>close</button> + </div> - </React.Fragment> )
Snackbars should have a background color which has enough constrast with the text, so it remains readable and legible. Avoid non-opaque backgrounds and use a color contrast tool to check if there is enough contrast between a background color and the text.
Regardless of what you display inside of your component, it needs to be responsive. For example, it needs to occupy full width of the view on mobile screens and have some minWidth
on larger screens. To acheive such responsiveness, notistack exposes SnackbarContent
component. Even though you don't have to, it is recommended to use this component as a base for your custom Snackbars.
import { SnackbarContent, CustomContentProps } from 'notistack'
interface ReportCompleteProps extends CustomContentProps {
allowDownload: boolean
}
const ReportComplete = React.forwardRef<HTMLDivElement, ReportCompleteProps>((props, ref) => {
const {
// You have access to notistack props and options 👇🏼
id,
message,
// as well as your own custom props 👇🏼
allowDownload,
...other
} = props
return (
<SnackbarContent ref={ref} role="alert" {...other}>
{message}
</SnackbarContent>
)
})
Variants are defined in Components
prop of SnackbarProvider
. By default, notistack comes with 5 variants out of the box: default
, success
, error
, warning
and info
.
As demonstrated above, you can have as many variants as you like and name them as you wish. If you are using TypeScript, you would also need to use module augmentation. As an example, you can put the code below somewhere in your codebase:
declare module 'notistack' {
interface VariantOverrides {
// removes the `warning` variant
warning: false;
// adds `myCustomVariant` variant
myCustomVariant: true;
// adds `reportComplete` variant and specifies the
// "extra" props it takes in options of `enqueueSnackbar`
reportComplete: {
allowDownload: boolean
}
}
}