fascinating-indigo•16mo ago

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•16mo 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•16mo ago

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

fascinating-indigo•16mo ago

I want to translate the page label in the sider. @kapa.ai

kapa.ai•16mo 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?

ambitious-aqua•16mo 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.

ambitious-aqua•16mo 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-indigo•16mo 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.

unwilling-turquoise•15mo ago

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

ambitious-aqua•15mo 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>
    );
};