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
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:
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
:
After creating the i18nProvider
, you can pass it to the <Refine />
component:
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:
----------------------<@835960138347053057> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet•8mo ago
@kapa.ai the answer is incomplete, how i read the new language file?
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:
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:
----------------------<@835960138347053057> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet•8mo ago
Thanks, it helped me