translate antd toast messages with i18n

@kapa.ai how can i translate antd toast messages (for example, useDrawerForm, useModalForm) with i18n?

2 Replies

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To translate Ant Design toast messages (such as those used in useDrawerForm and useModalForm) with i18n in refine, you can follow these steps: 1. Set up i18n in your project: Ensure you have i18n configured in your project. Here is an example of setting up i18n in a refine project:

    import { Refine, Resource } from "@refinedev/core";  
    import { ThemedLayoutV2 } from "@refinedev/antd";  
    import { useTranslation } from "react-i18next";  
    import "./i18n";  
    import { Header } from "components";  
    
    const App: React.FC = () => {  
        const { t, i18n } = useTranslation();  
    
        const i18nProvider = {  
            translate: (key: string, options?: any) => t(key, options),  
            changeLocale: (lang: string) => i18n.changeLanguage(lang),  
            getLocale: () => i18n.language,  
        };  
    
        return (  
            <Refine  
                i18nProvider={i18nProvider}  
                /* ... */  
            >  
                <ThemedLayoutV2  
                    header={<Header />}  
                >  
                    {/* ... */}  
                </ThemedLayoutV2>  
            </Refine>  
        );  
    };

    import { Refine, Resource } from "@refinedev/core";  
    import { ThemedLayoutV2 } from "@refinedev/antd";  
    import { useTranslation } from "react-i18next";  
    import "./i18n";  
    import { Header } from "components";  
    
    const App: React.FC = () => {  
        const { t, i18n } = useTranslation();  
    
        const i18nProvider = {  
            translate: (key: string, options?: any) => t(key, options),  
            changeLocale: (lang: string) => i18n.changeLanguage(lang),  
            getLocale: () => i18n.language,  
        };  
    
        return (  
            <Refine  
                i18nProvider={i18nProvider}  
                /* ... */  
            >  
                <ThemedLayoutV2  
                    header={<Header />}  
                >  
                    {/* ... */}  
                </ThemedLayoutV2>  
            </Refine>  
        );  
    };

Source (https://refine.dev/docs/guides-concepts/i18n/#changing-the-locale) 2. Translate Form Validation Messages: For translating form validation messages, you can use the translate function from your i18n setup. Here is an example of how to do this for a form item:

    {
      required: translate(
        "pages.login.errors.requiredEmail",
        "Email is required",
      ),
    },

    {
      required: translate(
        "pages.login.errors.requiredEmail",
        "Email is required",
      ),
    },

Source (https://github.com/refinedev/refine/issues/5855) 3. Use i18n in useDrawerForm and useModalForm: When using hooks like useDrawerForm and useModalForm, you can pass translated messages to the form validation rules. Here is an example of how you might do this:

    import { useDrawerForm } from "@refinedev/antd";
    import { useTranslation } from "react-i18next";

    const MyComponent = () => {
        const { t } = useTranslation();

        const { formProps, drawerProps } = useDrawerForm({
            // other configurations
            formProps: {
                ...formProps,
                rules: {
                    email: [
                        {
                            required: true,
                            message: t("pages.login.errors.requiredEmail", "Email is required"),
                        },
                        {
                            type: "email",
                            message: t("pages.login.errors.validEmail", "Invalid email address"),
                        },
                    ],
                },
            },
        });

        return (
            // your component JSX
        );
    };

    import { useDrawerForm } from "@refinedev/antd";
    import { useTranslation } from "react-i18next";

    const MyComponent = () => {
        const { t } = useTranslation();

        const { formProps, drawerProps } = useDrawerForm({
            // other configurations
            formProps: {
                ...formProps,
                rules: {
                    email: [
                        {
                            required: true,
                            message: t("pages.login.errors.requiredEmail", "Email is required"),
                        },
                        {
                            type: "email",
                            message: t("pages.login.errors.validEmail", "Invalid email address"),
                        },
                    ],
                },
            },
        });

        return (
            // your component JSX
        );
    };

This example shows how to use the t function from react-i18next to translate validation messages for a form used within a drawer. By following these steps, you can ensure that your Ant Design toast messages and form validation messages are properly translated using i18n in your refine project. For more detailed information, you can refer to the i18n documentation (https://refine.dev/docs/guides-concepts/i18n/#translation-file). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

translate antd toast messages with i18n

Did you find this page helpful?