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.
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>
You can entirely customize your snackbars using the content
which can be passed as a prop to SnackbarProvider
or in options parameter ofenqueueSnackbar
. Use the provided key to do actions specific to this snackbar (e.g. to close it).
import ReportCompleteSnackbar from './ReportComplete'
enqueueSnackbar('Your report is ready', {
persist: true,
content: (key, message) => (
<ReportCompleteSnackbar id={key} message={message} />
),
})
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 } from 'notistack'
interface RexportCompleteProps {
id: string
message: string
}
const ReportComplete = React.forwardRef<HTMLDivElement, ReportCompleteProps>((props, ref) => {
const { id, message, ...other } = props
return (
<SnackbarContent ref={ref} role="alert" {...other}>
{message}
</SnackbarContent>
)
})