Notistack npm library documentation website logo
npm downloads

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.

Vertical
Horizontal
<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>