How to set position for notifications?

[Firgrep]

Is there a quick way to set the position of the snackbar notification for the useNotification or NotificationsProvider? E.g. I would like notifications to spawn on the bottom-right corner rather than bottom-left.

Ideally, I'd be great to have this part of the options for the notificiation.show or set globally in the NotificationsProvider.

Thanks!

[Janpot]

Sure thing, you could set the anchorOrigin in the NotificationsProvider:

<NotificationsProvider
  slotProps={{
    snackbar: {
      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
    },
  }}
>

example

[Janpot]

Yes, that would be great. I believe we can add another section under scoped notifications.

[jakobmerrild]

Is there any way of doing this without creating a global explicit NotificationsProvider?

I'm currently using NextJS, with the NextAppProvider from toolpad and would like to avoid making my entire component tree client components.

If I add a NotificationsProvider to my root layout then I need to make it a client component because of the call to React.createContext here

Edit: At least that is how I understand the error I get when attempting it.

[Firgrep]

@jakobmerrild We have a component called Providers in the root layout that is a client component holds all client-side providers. It wraps around the children. But the children are not thereby turned into client components; they remain RSC (until you tell them otherwise).

🖼️ Example

[jakobmerrild]

I see, so that's essentially this pattern.

Thanks for the tip!

[jakobmerrild]

I should be able to use this to also have a global LocalizationProvider for the DateTime components (so far I have wrapped each individual form that I used the pickers in 🙃 )