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
5 Replies
kapa.ai
kapa.ai2y ago
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:
import { useNotification } from "@pankod/refine";

const { open } = useNotification();

// Call this function when the login is successful
const showSuccessNotification = () => {
open({
message: "Login Successful",
description: "You have successfully logged in.",
type: "success",
});
};
import { useNotification } from "@pankod/refine";

const { open } = useNotification();

// Call this function when the login is successful
const showSuccessNotification = () => {
open({
message: "Login Successful",
description: "You have successfully logged in.",
type: "success",
});
};
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). ----------------------
kapa.ai
kapa.ai2y ago
<@942824607818317905> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphire
adverse-sapphire2y ago
which ui library you are using ?
absent-sapphire
absent-sapphireOP2y ago
MUI @alicanerdurmaz Meterial UI
adverse-sapphire
adverse-sapphire2y 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

Did you find this page helpful?