Display success toast notification
I have created auth provider and i implemented login functionality .when I login it display toast using 'throw new Error' if there is error ,I want to know how to display success notification or toast when user successfully log in.
Successfully login I want to display toast .I used UseNotification hook but error that cannot use hook there. Iam new to refine
![No description](https://cdn.answeroverflow.com/1088507646782484622/Screenshot_20230323-222532_DerpLauncher.jpg)
5 Replies
Hey @MarcoNix! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
Based on the information provided in the extracts, you can use the
useNotification
hook to display a success toast notification when a user logs in successfully. However, the extracts do not provide specific information about implementing this functionality within an auth provider.
To display a success notification, you can follow this general pattern:
Keep in mind that you cannot use hooks inside non-React components or functions. If you're trying to use the useNotification
hook inside a non-React component, you might encounter an error. Make sure to use the hook within a React component.
For more information on using notifications in refine, you can refer to the Notification Provider documentation (https://refine.dev/docs/examples/notification-provider/react-toastify).
----------------------<@942824607818317905> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire•2y ago
which ui library you are using ?
foreign-sapphire•2y ago
MUI
@alicanerdurmaz Meterial UI
rare-sapphire•2y ago
Hi @MarcoNix, refine doesn't automatically show success notification after login. I will add this feature to our backlog.
with import
{ RefineSnackbarProvider} from "@refinedev/mui"
we are using notistack@2
under the hood. This library cannot use outside react component.
we need to update this to notisitack@3
to use outside react component.
issue: https://github.com/iamhosseindhv/notistack/issues/30#issuecomment-1171622850
But you have options:
option 1
i created notistack@3 example for you: https://codesandbox.io/s/trusting-hill-1voklb?file=/src/App.tsx:1386-1492
but with this example, we are using 2 snackbarprovider and this is not ideal.
option 2
i suggest to create your notification provider until we updated notistack@2
to notistack@3
for example we implement react-toastify in this example: https://refine.dev/docs/api-reference/core/providers/notification-provider/#creating-an-notificationprovider but i don't know can u use react-toastify outside react.
but i know u can use this https://react-hot-toast.com/docs/toast outside react or you can implement notisitack@3