0

I'm trying to implement language change in my app using these dependencies:

"i18next": "^21.6.13",
"i18next-browser-languagedetector": "^6.1.3",
"i18next-http-backend": "^1.3.2",
"react-i18next": "^11.15.6",

I tried pretty standard method and it works fine:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { DateTime } from "luxon";
import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
      format: (value, format, lng) => {
        if (value instanceof Date) {
          return DateTime.fromJSDate(value)
            .setLocale(lng)
            .toLocaleString(DateTime[format]);
        }
        return value;
      },
    },
  });

export default i18n;

What i need to do is to get translations from backend with axios. I tried to do this https://github.com/i18next/i18next-http-backend , but all examples are with local json data and this is not what i want to do. I tried to hook data and pass it in resources, but it dosen't work. Any thoughts of how it could be done? Or helpful links? It doesn't have to be with axios. What i have is accessive link with json data and I want to use it as backend with i18next. Any help would be much appreciated, thanks. P.S. please don't ban if question is not clear enough, I'll try to explain better if needed. I'm tired.

M G
  • 35
  • 7
  • Have you compared with this? https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#separate – adrai Mar 25 '22 at 19:56
  • you can defina a custom loadPath and serve the translations from wherever you want – adrai Mar 25 '22 at 19:57
  • @adrai hello, i've tried to imply loadPath with axios and fetch and even without, but it just doesn't work, maybe you have an idea why? or maybe you have an example? Thank you. – M G Mar 28 '22 at 10:10
  • A reproducible example would help... Here some issues you could look at: https://github.com/i18next/i18next-http-backend/search?q=axios&type=issues – adrai Mar 28 '22 at 11:39
  • @adrai thank you, it worked with "http://localhost:5000/locales/{{lng}}/{{ns}}.json", i have another, probably dumb question, is it possible to use normal url, without .json in the end? i tried with JSON.stringify and just res.data, but it didn't worked. – M G Mar 28 '22 at 13:25
  • This only works if there is a server side route somewhere returning the appropriate json content – adrai Mar 28 '22 at 15:38

0 Answers0