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

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

sensitive-blue•13mo ago

I already do it. It's working with project except resources I will add screen shot

sensitive-blue•13mo ago

sensitive-blue•13mo ago

?? @kapa.ai

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

sensitive-blue•13mo ago

@kapa.ai

kapa.ai•13mo ago