How implementation a i18n in React App
Tags: i18next, i18n, react, hacktoberfest
Published: 2022-10-08 17:08:34

---
title: How implementation a i18n in React App
published: true
description: This article is about implementation i18n in a React App with react-i18next
tags: i18next, i18n, react, hacktoberfest
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57kzjdm4nupsf4jiy45v.jpg
# Use a ratio of 100:42 for best results.
---

## First install library's

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

```node
npm install react-i18next i18next i18next-http-backend --save
```

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

File with name i18n.js and this content below

```js
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;
```

## Import this file i18n.js in your index.js of React App
Usage this imports file i18n.js and provider in your config App

```jsx
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
```
And usage this provider in render App
```jsx
 <I18nextProvider i18n={i18n}>
   <App />
 </I18nextProvider>
```

## Example with index.js with provider and imports
Next example with implementation imports and provider in your React App

```jsx
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>
);
```

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
```json
{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}
```

name file: locales/pt/translate.json
```json
{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}
```

name file: locales/es/translate.json
```json
{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}
```

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

```jsx
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;
```

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
- The official site [react-i18next](https://react.i18next.com)
- A project working with real implementation [Google React](https://github.com/lucasferreiralimax/google-react)
- My profile in Github [@lucasferreiralimax](https://github.com/lucasferreiralimax)

## Do you need help?
Comment or talk with me
I feel like help you and nice to meet you.