useTranslate doesn't work at app.ts

Using refine v4 I used useTranslate inside app.ts Refine - resources And it's not working
9 Replies
kapa.ai
kapa.ai2y ago
Hi @Michaelreda. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the useTranslate hook in Refine, you need to provide an i18nProvider to the <Refine> component. The i18nProvider is an object that includes the translate, changeLocale, and getLocale methods. Here is an example of how to create an i18nProvider:
import type { I18nProvider } from "@refinedev/core";
import { Refine } from "@refinedev/core";
import { useTranslation } from "react-i18next";

const App: React.FC = () => {
const { t, i18n } = useTranslation();

const i18nProvider: I18nProvider = {
translate: (key: string, options?: any) => t(key, options),
changeLocale: (lang: string) => i18n.changeLanguage(lang),
getLocale: () => i18n.language,
};

return (
<Refine
i18nProvider={i18nProvider}
/* ... */
>
{/* ... */}
</Refine>
);
};
import type { I18nProvider } from "@refinedev/core";
import { Refine } from "@refinedev/core";
import { useTranslation } from "react-i18next";

const App: React.FC = () => {
const { t, i18n } = useTranslation();

const i18nProvider: I18nProvider = {
translate: (key: string, options?: any) => t(key, options),
changeLocale: (lang: string) => i18n.changeLanguage(lang),
getLocale: () => i18n.language,
};

return (
<Refine
i18nProvider={i18nProvider}
/* ... */
>
{/* ... */}
</Refine>
);
};
(Source: Refine Documentation (https://refine.dev/docs/api-reference/core/providers/i18n-provider)) After passing the i18nProvider to the <Refine> component, you can use the useTranslate hook in your components:
import { useTranslate } from "@refinedev/core";

export const MyComponent = () => {
const translate = useTranslate();

return <button>{translate("my.translate.text")}</button>;
};
import { useTranslate } from "@refinedev/core";

export const MyComponent = () => {
const translate = useTranslate();

return <button>{translate("my.translate.text")}</button>;
};
(Source: Refine Documentation (https://refine.dev/docs/api-reference/core/hooks/translate/useTranslate)) Please ensure that you have provided the i18nProvider to the <Refine> component and that you are using the useTranslate hook inside a component that is a child of <Refine>. If you are still facing issues, please provide more details about your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2y ago
<@707506535357480961> kapa.ai is still learning and improving, please let us how it did by reacting below
fascinating-indigo
fascinating-indigoOP2y ago
I already do it. It's working with project except resources I will add screen shot
fascinating-indigo
fascinating-indigoOP2y ago
No description
fascinating-indigo
fascinating-indigoOP2y ago
No description
fascinating-indigo
fascinating-indigoOP2y ago
?? @kapa.ai
kapa.ai
kapa.ai2y ago
Let me check the knowledge base for you. One moment! :books: Sorry @Michaelreda, 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?
fascinating-indigo
fascinating-indigoOP2y ago
@kapa.ai
kapa.ai
kapa.ai2y ago
Let me check the knowledge base for you. One moment! :books: Sorry @Michaelreda, 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?