How to set the success pop up message on front end?
When I succesfull submit I would like the pop up message.
const handleAddEmployee = async (values: EmployeeValues) => {
setLoading(true);
try {
const response = await axios.post('http://localhost:8080/api/v1/users/invite', {
name: values.name,
surname: values.surname,
email: values.email,
parentUserID: identity.userid,
});
if (response.status === 201) { console.log('Invitation sent successfully'); console. navigate("/employees/create");
} else { console.log('Failed to send invitation'); } } catch (error) { console.error(error); } finally { setLoading(false); } };
if (response.status === 201) { console.log('Invitation sent successfully'); console. navigate("/employees/create");
} else { console.log('Failed to send invitation'); } } catch (error) { console.error(error); } finally { setLoading(false); } };
12 Replies
Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To show a success notification after successfully submitting the form, you can use the
useForm
hook from refine with the successNotification
property. However, the code you provided is not using refine, and it's using axios directly for API calls.
If you want to integrate refine into your code, you can follow these steps:
1. Wrap your application with the NotificationProvider
from refine. This is required for notifications to work.
2. Use the useForm
hook with the successNotification
property to customize the success notification.
Here's an example of how to use the useForm
hook with a custom success notification:
However, since your code is not using refine, you can use a third-party library like Ant Design's notification (https://ant.design/components/notification/) or React Toastify (https://fkhadra.github.io/react-toastify/introduction/) to show a success notification after the form is submitted successfully.
For example, using Ant Design's notification:
1. Install Ant Design: npm install antd
2. Import the notification component:
3. Show the success notification after the form is submitted successfully:
```javascript
const handleAddEmployee = async (values: EmployeeValues) => {
setLoading(true);
try {
const response = await axios.post("http://localhost:8080/api/v1/users/invite", {
name: values.name,
surname: values.surname,
email: values.email,
parentUserID: identity.userid,
});if (response.status === 201) {
console.log("Invitation sent successfully");
notification.success({
message: "Invitation sent successfully",
description:
Employee invitation sent successfully to ${values.email}
,
});
navigate("/employees/create");
} else {
console.log("Failed to send invitation");
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
``
This will show a success notification when the form is submitted successfully.
----------------------
Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:
----------------------<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
sensitive-blue•17mo ago
Which UI library are you using?
relaxed-coral•17mo ago
I'm using refine.
foreign-sapphire•17mo ago
headless or with MUI or ant design or similar ?
relaxed-coral•17mo ago
I have installed mui
but pankod as well.
Mui i'm using for icons
`
Here I'm getting the popup message.
I'm just not sure I must to add the onFinishHandler to Form? and create interface props?
sensitive-blue•17mo ago
i'm confused. are you trying to customize notification on
useForm
?
you can customize like this https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#successnotification
If you want to open notification in any time in any component
you can do that like this:
https://refine.dev/docs/api-reference/core/hooks/useNotification/relaxed-coral•17mo ago
Not customize. just to show it up
In the createBuildingPlan it is showing. (followed tutorial)
But on the AddEmployee I have console log, but the little popup message not showing
sensitive-blue•17mo ago
https://refine.dev/docs/api-reference/core/hooks/useNotification/
but you can't use outside react component
relaxed-coral•17mo ago
Thank you. I managed to use the toastify. with that it is very easy 🙂