Positioning
Placement of Snackbars can be adjusted horizontally and vertically depending on application needs. As a general rule, Snackbars should be placed in front of app content and distant from frequent touch points or navigation elements.
By default, notistack displays Snackbars on the bottom-left corner of the screen; however, there are scenarios where more flexibility is needed. For example, in the case of rtl languages such as Farsi or Arabic, you may want to position Snackbars on bottom-right corner of the screen. Placement can be configured usinganchorOrigin
prop.
Pro tip: Be consistent in where you place Snackbars across the app.
<SnackbarProvider
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<App />
</SnackbarProvider>
const message = 'Your notification here';
enqueueSnackbar(message, {
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left'
}
})
Set dense
to true to have less margins for your Snackbars. This prop is recommended for displaying snackbars on devices with smaller screen sizes (e.g. mobile devices).
<SnackbarProvider>
<App />
</SnackbarProvider>