Notification provider

How to customize success notification on create, edit, update and delete

2 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can customize the success notification for various operations like create, edit, update, and delete using the successNotification prop in the respective hooks. The NotificationProvider is required for this prop to work. Here are examples of how you can customize the success notification for different operations: Create:

const { mutate } = useCreate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

const { mutate } = useCreate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

Source (https://refine.dev/docs/data/hooks/use-create#successnotification) Edit:

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${data.title}`,  
 description: "good job!",  
 type: "success",  
 };  
 },  
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${data.title}`,  
 description: "good job!",  
 type: "success",  
 };  
 },  
});

Source (https://refine.dev/docs/data/hooks/use-form#successnotification-) Update:

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

Source (https://refine.dev/docs/data/hooks/use-update#successnotification) Delete:

const { mutate } = useDelete();  
  
mutate({  
 successNotification: (data, id, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

const { mutate } = useDelete();  
  
mutate({  
 successNotification: (data, id, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

Source (https://refine.dev/docs/data/hooks/use-delete#successnotification) In each of these examples, the successNotification prop is a function that returns an object with message, description, and type properties. The message and description can be customized as per your needs. The type should be set to "success" for success notifications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below