stormy-gold•8mo ago

Change default language

Hi, I'm looking for how to translate the default system English language, but not to be switched, to be permanent. I want to do a translation of the "Translation file" (https://refine.dev/docs/guides-concepts/i18n/#translation-file) but not using any of the example libraries (react-i18next nor i18n-nextjs). How can I make a custom "I18nProvider" to just change the system texts like buttons and alerts?

Internationalization (i18n) | refine

Internationalization (i18n) is a process that allows software applications to be localized for different regions and languages. Refine can work with any i18n framework, but needs an i18nProvider to be created based on the chosen library.

6 Replies

kapa.ai•8mo ago

Hi @nicolasjuan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the default language of your application, you need to create a custom i18nProvider and pass it to the <Refine /> component. The i18nProvider is an object that must have the following properties:

const i18nProvider = {  
 translate: (key: string, params: object) => string,  
 changeLocale: (lang: string) => Promise,  
 getLocale: () => string,  
};

const i18nProvider = {  
 translate: (key: string, params: object) => string,  
 changeLocale: (lang: string) => Promise,  
 getLocale: () => string,  
};

The translate function is used to translate a given key into the corresponding text in the current language. The changeLocale function is used to change the current language, and the getLocale function is used to get the current language. Here is an example of how you can create a custom i18nProvider:

import { I18nProvider } from "@refinedev/core";  

const i18nProvider: I18nProvider = {  
 translate: (key: string, options?: any, defaultMessage?: string) => {
   // Your translation logic here
 },
 changeLocale: (lang: string, options?: any) => {
   // Your logic to change the language here
   // Return a promise that resolves when the language has been changed
 },
 getLocale: () => {
   // Your logic to get the current language here
   // Return the current language
 },
};

import { I18nProvider } from "@refinedev/core";  

const i18nProvider: I18nProvider = {  
 translate: (key: string, options?: any, defaultMessage?: string) => {
   // Your translation logic here
 },
 changeLocale: (lang: string, options?: any) => {
   // Your logic to change the language here
   // Return a promise that resolves when the language has been changed
 },
 getLocale: () => {
   // Your logic to get the current language here
   // Return the current language
 },
};

After creating the i18nProvider, you can pass it to the <Refine /> component:

import { Refine } from "@refinedev/core";  

const App: React.FC = () => {  
 return (  
 <Refine  
 i18nProvider={i18nProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  

const App: React.FC = () => {  
 return (  
 <Refine  
 i18nProvider={i18nProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

This will allow you to use the useTranslate, useSetLocale, and useGetLocale hooks in your components to handle i18n. For more information, refer to the Refine i18nProvider documentation (https://refine.dev/docs/core/providers/i18n-provider) and the Refine i18n guide (https://refine.dev/docs/guides-concepts/i18n). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

stormy-gold•8mo ago

@kapa.ai the answer is incomplete, how i read the new language file?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To read the new language file, you can use the import statement in JavaScript. You can import the JSON file containing your translations and use it in your translate function. Here's an example:

import { I18nProvider } from "@pankod/refine";
import translations from "./path-to-your-translations.json";

const i18nProvider: I18nProvider = {
    translate: (key: string, options?: any, defaultMessage?: string) => {
        // Use the key to get the translation from your JSON file
        const translation = translations[key];
        // If a translation is found, return it. Otherwise, return the key or the default message
        return translation || defaultMessage || key;
    },
    changeLocale: (lang: string, options?: any) => {
        // Your logic to change the language here
        // Return a promise that resolves when the language has been changed
    },
    getLocale: () => {
        // Your logic to get the current language here
        // Return the current language
    },
};

export default i18nProvider;

import { I18nProvider } from "@pankod/refine";
import translations from "./path-to-your-translations.json";

const i18nProvider: I18nProvider = {
    translate: (key: string, options?: any, defaultMessage?: string) => {
        // Use the key to get the translation from your JSON file
        const translation = translations[key];
        // If a translation is found, return it. Otherwise, return the key or the default message
        return translation || defaultMessage || key;
    },
    changeLocale: (lang: string, options?: any) => {
        // Your logic to change the language here
        // Return a promise that resolves when the language has been changed
    },
    getLocale: () => {
        // Your logic to get the current language here
        // Return the current language
    },
};

export default i18nProvider;

In this example, translations is a JSON object that contains your translations. The keys of this object are the translation keys, and the values are the translated texts. You can structure this JSON file however you like, as long as it matches the structure you use in your translate function. Please note that the path to your translations file should be relative to the file where you're importing it. For example, if your translations file is in the same directory as your i18nProvider, you can import it like this: import translations from "./translations.json";. For more information, refer to the Refine i18nProvider documentation (https://refine.dev/docs/core/providers/i18n-provider) and the Refine i18n guide (https://refine.dev/docs/guides-concepts/i18n). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

stormy-gold•8mo ago

Thanks, it helped me