DEV Community

Lucas
Lucas

Posted on • Edited on

How implementation a i18n in React App

#i18next #i18n #react #hacktoberfest

First install library's

You need install all libs of react-i18next, i18next and i18next-http-backend

npm install react-i18next i18next i18next-http-backend --save
Enter fullscreen mode Exit fullscreen mode

It's now create the config file in your src files React App

File with name i18n.js and this content below

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

i18n
  .use(backend)
  .use(initReactI18next)
  .init({
    lng: "pt",
    fallbackLng: "pt",
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: 'languageChanged',
      useSuspense: false,
    }
  });

export default i18n;
Enter fullscreen mode Exit fullscreen mode

Import this file i18n.js in your index.js of React App

Usage this imports file i18n.js and provider in your config App

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
Enter fullscreen mode Exit fullscreen mode

And usage this provider in render App

 <I18nextProvider i18n={i18n}>
   <App />
 </I18nextProvider>
Enter fullscreen mode Exit fullscreen mode

Example with index.js with provider and imports

Next example with implementation imports and provider in your React App

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.scss';
import App from './App';

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

it's good, now you need create your translate files and usage in yours components

Create Files of translate locales

In public folder do you need create this folder with name locales and in locales folder you create all folders for example en or pt or es names of your translate files
Inside your folder you need create a json with name translate.json with your translate ocurrences for example follow this json below

name file: locales/en/translate.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}
Enter fullscreen mode Exit fullscreen mode

name file: locales/pt/translate.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}
Enter fullscreen mode Exit fullscreen mode

name file: locales/es/translate.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}
Enter fullscreen mode Exit fullscreen mode

Very good files with translates english, portuguese and spanish

It's now use your translate in components

Now do you need usage translate in component and create this a select or a button for changing language of locale with hook useTranslation

A example basic use in component with a select change of language

import React from 'react';
import { useTranslation } from 'react-i18next';

function AppLanguage() {
  const { t, i18n } = useTranslation();

  return (
    <React.Fragment>
      <h1>{t('title.config')}</h1>
      <select
        className="App-language"
        name="language"
        value={i18n.language}
        onChange={e => i18n.changeLanguage(e.target.value)}
      >
        <option value="pt">{t('languages.pt')}</option>
        <option value="en">{t('languages.en')}</option>
        <option value="es">{t('languages.es')}</option>
      </select>
    </React.Fragment>
  );
}

export default AppLanguage;
Enter fullscreen mode Exit fullscreen mode

Finished you are a good hacker and your React App have a internalization with a lot languages and international access for many peoples in all the World, Good study for you and a nice #hacktoberfest

References

If do you need refences follow the list below with more examples

Do you need help?

Comment or talk with me
I feel like help you and nice to meet you.

Top comments (0)

Read next

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

abhay_yt_52a8e72b213be229 profile image

Mastering Paginated API Calls in React for Optimized Data Fetching

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

WebSocket Integration in React for Real-Time Communication

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Implementing Infinite Scrolling in React for Seamless User Experience

Abhay Singh Kathayat -