Translate label for custom pages
I am using i18n for the changing the language. The example page labels all get translated but my custom pages does not. How do I add translation data for my custom pages (just the label to begin with) in the translation files?
9 Replies
Hi @justamando. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To add translation data for your custom pages, you need to modify the translation files (e.g.,
common.json
) for each language you want to support. Here's how you can do it:
1. Locate the translation files in your project directory. They should be in the public/locales
folder, with separate folders for each language (e.g., en
for English, de
for German).
2. Open the common.json
file in the language folder you want to modify.
3. Add your custom page translations under a new key, for example, customPages
. For each label you want to translate, add a new key-value pair.
Here's an example of how to add a translation for a custom page label in the English translation file:
Repeat this process for each language you want to support.
4. In your custom page component, use the useTranslate
hook from refine to get the translated label:
Now, your custom page label should be translated based on the selected language.
For more information on using i18n with refine, refer to the i18n Provider documentation (https://refine.dev/docs/api-reference/core/providers/i18n-provider).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@483714808018108416> kapa.ai is still learning and improving, please let us how it did by reacting below
fascinating-indigoOP•2y ago
I want to translate the page label in the sider.
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
Sorry @justamando, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
extended-salmon•2y ago
You should use
useTranslate
hook. https://refine.dev/docs/api-reference/core/hooks/translate/useTranslate/useTranslate | refine
If you need to translate the texts in your own components, refine provides the useTranslate hook, It returns the translate method from i18nProvider under the hood.
extended-salmon•2y ago
and you check out this doc
https://refine.dev/docs/api-reference/core/providers/i18n-provider/
i18n Provider | refine
refine can work with any i18n framework, but an i18nProvider must be created, based on the chosen library.
fascinating-indigoOP•2y ago
Okay thanks I got it working inside custom components but how do I access the same data in the App.tsx to set the label of the page.
foreign-sapphire•2y ago
Hello @justamando Could you elaborate more? so @yildirayunlu can help you?
extended-salmon•2y ago
Hey @justamando I think it will happen this way.