foreign-sapphire•2y ago

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

5 Replies

kapa.ai•2y 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•2y ago

<@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