Translate label for custom pages

ordinary-sapphire · 2023-05-02T10:10:39.211Z

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?

K

kapa.ai•5/2/23, 10:10 AM

Hi @justamando. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•5/2/23, 10:11 AM

----------------------
To add translation data for your custom pages, you need to modify the translation files (e.g.,

common.json

common.json

common.json

common.json) for each language you want to support. Here's how you can do it:

Locate the translation files in your project directory. They should be in the
```
public/locales
```
public/locales
```
public/locales
```
public/locales
folder, with separate folders for each language (e.g.,
```
en
```
en
```
en
```
en
for English,
```
de
```
de
```
de
```
de
for German).
Open the
```
common.json
```
common.json
```
common.json
```
common.json
file in the language folder you want to modify.
Add your custom page translations under a new key, for example,
```
customPages
```
customPages
```
customPages
```
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"
    }
  }
}

{
  "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.

In your custom page component, use the
```
useTranslate
```
useTranslate
```
useTranslate
```
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
};

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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/2/23, 10:11 AM

@483714808018108416 kapa.ai is still learning and improving, please let us how it did by reacting below

O

ordinary-sapphireOP•5/2/23, 10:13 AM

I want to translate the page label in the sider.

O

ordinary-sapphireOP•5/2/23, 10:13 AM

@kapa.ai

K

kapa.ai•5/2/23, 10:13 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/2/23, 10:13 AM

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?

S

skinny-azure•5/2/23, 11:25 AM

You should use

useTranslate

useTranslate

useTranslate

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.

S

skinny-azure•5/2/23, 11:26 AM

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.

O

ordinary-sapphireOP•5/3/23, 5:40 AM

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.

C

colourful-plum•5/15/23, 8:37 AM

Hello @justamando Could you elaborate more? so @yildirayunlu can help you?

S

skinny-azure•5/16/23, 6:56 AM

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>
    );
};

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>
    );
};