Snackbar anchor position
<RefineSnackbarProvider
maxSnack={5}
anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
preventDuplicate={true}
>
The anchorOrigin is not respected
11 Replies
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
RefineSnackbarProvider
is a wrapper for the SnackbarProvider
from the notistack
package. The anchorOrigin
prop should control the position of the Snackbar notifications on the screen. If it's not being respected, it might be due to a bug or a conflict with other styles or settings in your application.
Here's an example of how it's typically used:
If you're still having trouble, I recommend checking the official documentation for Refine (https://refine.dev/docs/ui-integrations/material-ui/introduction#notifications) and notistack (https://notistack.com/api-reference#snackbarprovider-props). If the issue persists, consider opening an issue on the Refine GitHub page (https://github.com/refinedev/refine/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•5mo ago
@kapa.ai what is the useNotificationProvider for mui
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useNotificationProvider
for Material UI is a hook provided by Refine that integrates with the Material UI's notification system. It uses the notistack
package under the hood to manage notifications.
You can use it in the notificationProvider
prop of the <Refine />
component in your application like this:
This allows Refine to display user-friendly notifications for various data-related actions, ensuring a clear and informative user experience.
For more information, you can refer to the official documentation (https://refine.dev/docs/ui-integrations/material-ui/introduction#notifications).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•5mo ago
@kapa.ai still the anchor is allways top right
Let me check the knowledge base for you. One moment! :books:
----------------------
If the
anchorOrigin
prop in the RefineSnackbarProvider
is not being respected and the Snackbar is always appearing at the top right, it might be due to a conflict with other styles or settings in your application.
Here's an example of how it's typically used:
If you're still having trouble, I recommend checking the official documentation for Refine (https://refine.dev/docs/ui-integrations/material-ui/introduction#notifications) and notistack (https://notistack.com/api-reference#snackbarprovider-props). If the issue persists, consider opening an issue on the Refine GitHub page (https://github.com/refinedev/refine/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•5mo ago
@kapa.ai its hard coded in the useDataProvider enqueueSnackbar(
<Box>
<Typography variant="subtitle2" component="h6">
{description}
</Typography>
<Typography variant="caption" component="p">
{message}
</Typography>
</Box>,
{
key,
variant: type,
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
disableWindowBlurListener: true,
},
);
![No description](https://cdn.answeroverflow.com/1229078193177104534/image.png)
Let me check the knowledge base for you. One moment! :books:
----------------------
It seems like the
anchorOrigin
is indeed hardcoded in the useNotificationProvider
hook. This means that the position of the Snackbar notifications is always set to the top right of the screen, regardless of the anchorOrigin
prop you set in the RefineSnackbarProvider
.
Here's the relevant code:
If you need to change the position of the Snackbar notifications, you might need to create a custom notification provider or modify the useNotificationProvider
hook. If you believe this is a bug or a feature that should be added to Refine, consider opening an issue on the Refine GitHub page (https://github.com/refinedev/refine/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below