CODEWITHSUNDEEP
reactjsi18nextreact-i18next
Crocsx
Crocsx

Reputation: 7640

i18next how to load the translations?

I am trying to add translation in my app, but I can't find a way to make the i18next works.

Here the i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as en from './i18n/en.json';
import * as jp from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en,
      jp
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

and then, I import it in the second line of my index file.

The logs are :

i18next: languageChanged en i18next.js:27

i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1), …} projectSelector.tsx:16 I18n {observers: {…}, options: {…}, services: {…}, logger: Logger, modules: {…}, …} i18next.js:27

i18next::translator: missingKey en translation PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME

THe translation look like this

{
  "PROJECT": {
    "CREATE_PROJECT" : {
      "DEFAULT_PJ_NAME" : "Default"
    }
  }
}

Upvotes: 1

Views: 1682

Answers (1)

Aleks25
Aleks25

Reputation: 91

You are on a good path you just need to add translation to mark the translations for i18next 

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en_translate from './i18n/en.json';

import jp_transltate from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en:{
            translation: en_translate              
        },
      jp:{
            translation: jp_transltate              
        }
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

Adding the translation in your funnctional component wiht Hook

import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <h1>{t('PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME')}</h1>
}

You can take a look in i18next Quick start guide for different implementations it is very well explained

Upvotes: 4

Related Questions