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
kapa.ai
kapa.ai2y ago
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:
{
"pages": {
// ... existing translations
},
"customPages": {
"myCustomPage": {
"label": "My Custom Page"
}
}
}
{
"pages": {
// ... existing translations
},
"customPages": {
"myCustomPage": {
"label": "My Custom Page"
}
}
}
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:
import { useTranslate } from "@refinedev/core";

const MyCustomPage = () => {
const t = useTranslate();

const label = t("customPages.myCustomPage.label");

// ... your custom page implementation
};
import { useTranslate } from "@refinedev/core";

const MyCustomPage = () => {
const t = useTranslate();

const label = t("customPages.myCustomPage.label");

// ... your custom page implementation
};
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: ----------------------
kapa.ai
kapa.ai2y ago
<@483714808018108416> kapa.ai is still learning and improving, please let us how it did by reacting below
harsh-harlequin
harsh-harlequin2y ago
I want to translate the page label in the sider. @kapa.ai
kapa.ai
kapa.ai2y ago
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?
magic-amber
magic-amber2y ago
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.
magic-amber
magic-amber2y ago
i18n Provider | refine
refine can work with any i18n framework, but an i18nProvider must be created, based on the chosen library.
harsh-harlequin
harsh-harlequin2y 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.
No description
correct-apricot
correct-apricot2y ago
Hello @justamando Could you elaborate more? so @yildirayunlu can help you?
magic-amber
magic-amber2y ago
Hey @justamando I think it will happen this way.
const RenderRefine = () => {
const translate = useTranslate();

return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "posts",
list: "/posts",
show: "/posts/show/:id",
create: "/posts/create",
edit: "/posts/edit/:id",
meta: {
canDelete: true,
label: translate("resources.posts.name"),
},
},
]}
notificationProvider={notificationProvider}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
...
</Refine>
);
};

const App: React.FC = () => {
return (
<BrowserRouter>
<GitHubBanner />
<ConfigProvider theme={RefineThemes.Blue}>
<RenderRefine />
</ConfigProvider>
</BrowserRouter>
);
};
const RenderRefine = () => {
const translate = useTranslate();

return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "posts",
list: "/posts",
show: "/posts/show/:id",
create: "/posts/create",
edit: "/posts/edit/:id",
meta: {
canDelete: true,
label: translate("resources.posts.name"),
},
},
]}
notificationProvider={notificationProvider}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
...
</Refine>
);
};

const App: React.FC = () => {
return (
<BrowserRouter>
<GitHubBanner />
<ConfigProvider theme={RefineThemes.Blue}>
<RenderRefine />
</ConfigProvider>
</BrowserRouter>
);
};