Implementation of the I18next library

Question

Implementation of the I18next library

I am currently integrating react-i18next into my application to implement a switch button for French and English languages. Unfortunately, I am facing some issues as the translation is not working properly. I suspect it's related to the JSON file recognition, but I'm not entirely certain.

When I use {t("submit")}, it simply renders the string "submit" instead of fetching the corresponding translation from the file. It should display "Login".

Below is the relevant code snippet:

index.jsx:

// Code here

i18n.js :

// Code here

LoginScreen.js:

// Code here

en.js: (english json file)

{
    "submit": "Login"
}

I have double-checked the path to the translation file and reviewed for any possible typos, but the issue persists. Your help would be greatly appreciated.

Thank you in advance.

javascript reactjs web internationalization i18next

Answer 1

Answer №1

While I may not be an expert in reactjs, I am able to demonstrate my implementation in react-native.

I have organized the resources within the src folder as follows:

src/ lang >

   en > common.json
   fr > common.json

The common file contains values structured like this:

{
  "appStrings": {
     "ABOUT": "About",
    }
 }

To import these sources into the index.js file, I use the following code:

import resources from 'src/lang'; // ensure correct path is used
import {I18nextProvider} from 'react-i18next';
import i18next from 'i18next';


// Enabling multilingual support
i18next.init({
  compatibilityJSON: 'v3',
  interpolation: {
    escapeValue: false,
  },
  lng: 'en',
  resources: resources,
});

Next, I wrap my app with the i18Next provider:

<I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>

Within components, I utilize it like so:

const {t} = useTranslation();
<Text>{t('t.appStrings.ABOUT')}</Text>

You can modify the initialization according to your needs:

lng : 'en/fr' // based on your requirements

Answer 2

While I may not be an expert in reactjs, I am able to demonstrate my implementation in react-native.

I have organized the resources within the src folder as follows:

src/ lang >

   en > common.json
   fr > common.json

The common file contains values structured like this:

{
  "appStrings": {
     "ABOUT": "About",
    }
 }

To import these sources into the index.js file, I use the following code:

import resources from 'src/lang'; // ensure correct path is used
import {I18nextProvider} from 'react-i18next';
import i18next from 'i18next';


// Enabling multilingual support
i18next.init({
  compatibilityJSON: 'v3',
  interpolation: {
    escapeValue: false,
  },
  lng: 'en',
  resources: resources,
});

Next, I wrap my app with the i18Next provider:

<I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>

Within components, I utilize it like so:

const {t} = useTranslation();
<Text>{t('t.appStrings.ABOUT')}</Text>

You can modify the initialization according to your needs:

lng : 'en/fr' // based on your requirements

Implementation of the I18next library

Answer №1

Similar questions

Trigger notifications exclusively for specific hyperlink texts that are selected

What is the equivalent of getElementById in .ts when working with tags in .js?

Coordinated Universal Time on the Website

ReactJS encountered an error: Module '@progress/kendo-scheduler-react-wrapper' could not be located

In Node JS, the variable ID is unable to be accessed outside of the Mongoose

Unable to identify the element ID for the jQuery append operation

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

Execute test scenarios and upon successful completion, initiate deployment of a React JS application using Jenkins

What is the proper way to utilize the 'shallow: true' parameter when using 'router.replace' in the latest version of Next.js?

Title: Troubleshooting Nest.js Google OAuth Redirection Problem with CORS Blocking

Calling `$httpBackend.verifyNoOutstandingRequest()` will not result in any errors being raised

The error is popping up as I try to deploy my Next.js application on Vercel

Having some trouble creating a ping command in discord.js that displays latency; encountered this error message

Tips for implementing horizontal scroll in Material UI grid

Troubleshoot Node.js server-side rendering in Visual Studio Code

What is the best way to retrieve the data from this date object?

Issue regarding Jquery widget

TypeScript will show an error message if it attempts to return a value and instead throws an

`Finding the nodejs API route for displaying images from a database`

Passport sessions do not retain persistence