How do I customize notificationprovider messages?

For example, when I successfully edit a record, the toast message is "notifications.EditSuccess"

11 Replies

Hi @jawmes.. 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 messages using the successNotification prop in various hooks such as useForm, useCustom, useSelect, and useAutocomplete. This prop allows you to define a custom function that returns a notification object. The function receives the data, values, and resource as arguments. Here's an example of how you can customize the success notification in the useForm hook:

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",  
 };  
 },  
});

In this example, the success message is customized to display "Successfully created {data.title}". Similarly, you can customize the success notification in the useCustom, useSelect, and useAutocomplete hooks:

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

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

Please note that for these custom notifications to work, you need to have NotificationProvider defined in your <Refine> component. For more information, you can refer to the following documentation pages: - useForm (https://refine.dev/docs/core/hooks/use-form/#successnotification-) - useCustom (https://refine.dev/docs/core/hooks/data/use-custom/#successnotification) - useSelect (https://refine.dev/docs/core/hooks/use-select/#successnotification) - useAutocomplete (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-auto-complete/#successnotification) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

xenophobic-harlequin•8mo ago

@kapa.ai I'm using the import { useForm } from "@refinedev/react-hook-form"; where successNotification is not available?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- When using @refinedev/react-hook-form, the successNotification and errorNotification properties are not directly available in the root object. Instead, they are nested inside the refineCoreProps object. Here's how you can use successNotification with useForm from @refinedev/react-hook-form:

import { useForm } from "@refinedev/react-hook-form";

const f = useForm({
    refineCoreProps: {
        successNotification: () => {
            // your implementation
        }
    }
});

import { useForm } from "@refinedev/react-hook-form";

const f = useForm({
    refineCoreProps: {
        successNotification: () => {
            // your implementation
        }
    }
});

In this example, successNotification is a function that you can customize to return your desired notification message. For more information, you can refer to this Github issue (https://github.com/refinedev/refine/issues/3984) where this topic was discussed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

xenophobic-harlequin•8mo ago

@kapa.ai good bot ❤️

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Thank you! I'm here to help. If you have any more questions, feel free to ask. 😊 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

xenophobic-harlequin•8mo ago

@kapa.ai what about error messages?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Just like successNotification, you can customize error notifications using the errorNotification prop. This prop is also nested inside the refineCoreProps object when using @refinedev/react-hook-form. Here's how you can use errorNotification with useForm from @refinedev/react-hook-form:

import { useForm } from "@refinedev/react-hook-form";

const f = useForm({
    refineCoreProps: {
        errorNotification: (error) => {
            // your implementation
            return {
                message: `Error: ${error.message}`,
                description: "An error occurred",
                type: "error",
            };
        },
    },
});

import { useForm } from "@refinedev/react-hook-form";

const f = useForm({
    refineCoreProps: {
        errorNotification: (error) => {
            // your implementation
            return {
                message: `Error: ${error.message}`,
                description: "An error occurred",
                type: "error",
            };
        },
    },
});

In this example, errorNotification is a function that you can customize to return your desired error notification message. The function receives the error object as an argument, which you can use to customize the message. For more information, you can refer to this Github issue (https://github.com/refinedev/refine/issues/3984) where this topic was discussed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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