# React-i18next

React-i18next is a powerful internationalization framework for React / React Native which is based on i18next. react-i18next is optimally suited for server-side rendering. It provides extra extension point to work with next.js

## 1.Installation

To use react-i18next in our application we need to first install the package to our existing React application like below

```typescript
npm install react-i18next i18next --save
npm i i18next-browser-languagedetector
```

Once the package is installed create a new file named i18n in the src directory and add the initial setup details like below

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

const resources = {
  en: {
    translation: {
      welcome: "Welcome to React i18n",
      description: {
        line1: 'Hello <1>{{user}}</1> welcome to React i18n',
        line2: 'Nice to see the content'
      }
    },
  },
  fr: {
    translation: {
      welcome: "bienvenue dans React 18",
      description: {
        line1: 'Bonjour {{user}}, bienvenue sur React i18n',
        line2: 'Heureux de voir le contenu'
      }
    },
  },
  ar: {
    translation: {
      welcome: "مرحباً بكم في React i18n",
      description: {
        line1: 'مرحبًا بكم {{user}} React i18n',
        line2: 'يسعدني رؤية المحتوى'
      }
    },
  },
};

i18n.use(LanguageDetector).use(initReactI18next).init({
  resources,
  lng: "en",
});

export default i18n;
```

In the above snippet we have created the translation resources for each language like English, French and Arabic as well as the since we are using this in the React app we used the initReactI18next.

The interesting part is `i18n.use(initReactI18next)` where we pass the i18n instance to react-i18next which will make it available for all the components via the context api.

Once the above configuration is done go to main.tsx file and import i18n like below

```typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import './i18n';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
 
```

Now the setup of i18n is complete now we can see how to use the translation in the component.

## 2.Using the translator hook

Inside the component where we need to use the translation we can simply use the `useTranslation()` hook like below

```typescript
function App() {
  const { t } = useTranslation();

  return (
    <>
      <h1>{t("welcome")}</h1>
    </>
  );
}

export default App;
```

It will show the output like below based on the language which is setup in the i18n init

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1743347873159/097dce96-9608-4cce-9c2f-58d02ca3ae26.png align="center")

Now we will add some button to see the changes of the languages for that we will create a component named `LanguageSelector` inside the components folder

```typescript
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

const LanguageSelector = () => {
  const { i18n } = useTranslation();

  const languages = [
    { lang: "English", key: "en" },
    { lang: "French", key: "fr" },
    { lang: "Arabic", key: "ar" },
  ];

  const changeLanguage = (code: string) => {
    i18n.changeLanguage(code);
  };

  useEffect(() => {
    document.body.dir = i18n.dir();
  }, [i18n, i18n.language])
  

  return (
    <div className="btn-container">
      {languages.map((lng) => (
        <button className={lng.key === i18n.language ? 'selected': ''} key={lng.key} onClick={() => changeLanguage(lng.key)}>
          {lng.lang}
        </button>
      ))}
    </div>
  );
};

export default LanguageSelector;
```

Import this LanguageSelector component in App.tsx to see the CTA which can be used to change the language

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1743348046756/fdbb8eb7-d5fb-4528-a259-d9bee54348b2.png align="center")

## 3.Using RTL and LTR

In our example you have noted that we are having the language Arabic which typically starts from RTL direction in this case if we need our contents and text to show in that way we can use.

In the **LanguageSelector** component you can notice when we click on the button we are calling a function changeLanguage as well as useEffect which will change the direction based on the language selected once a new language is selected

```typescript
 const changeLanguage = (code: string) => {
    i18n.changeLanguage(code);
  };

  useEffect(() => {
    document.body.dir = i18n.dir();
  }, [i18n, i18n.language])
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1743348261765/02e6f684-acea-4a98-9882-4e7bf7f9a12e.png align="center")

## 4.Passing dynamic Values

Suppose if we need to pass dynamic values in our translation we can use string interpolation in the translation like below

```typescript
fr: {
    translation: {
      welcome: "bienvenue dans React 18",
      description: {
        line1: 'Bonjour {{user}}, bienvenue sur React i18n',
        line2: 'Heureux de voir le contenu'
      }
    },
  },
```

If you look at the descripton object line1 property we are having the user as a dynamic value which can be updated in the component like below

```typescript
const { t } = useTranslation(); 
const { line1, line2 } = t("description", {
     user: 'Nidhin'
 })
```

If not you can alos use the Trans Component like below

```typescript
<Trans
   i18nKey={line1}
   values={{
     user: "Kumar",
   }}
 />
```

Another advantage of using the Trans component is suppose if you need to bold the text you can extend it to another component like below

```typescript
//Translation
en: {
    translation: {
      welcome: "Welcome to React i18n",
      description: {
        line1: 'Hello <1>{{user}}</1> welcome to React i18n',
        line2: 'Nice to see the content'
      }
    },
  },

//Transcomponent to bold a text 

 <Trans
   i18nKey={line1}
   values={{
     user: "Kumar",
   }}
   components={{ 1: <b /> }}
 />
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1743348624406/b631a994-6d5d-4470-830d-dd74168a7001.png align="center")

## 5.Using Objects in Translation

Suppose if you have a nested objects in your translation like below

```typescript
 en: {
    translation: {
      welcome: "Welcome to React i18n",
      description: {
        line1: 'Hello <1>{{user}}</1> welcome to React i18n',
        line2: 'Nice to see the content'
      }
    },
  },
```

Where the description is having line1 and line2 and if you try to use it it in the component it won’t work for that you need to add the following property in the i18n config like below

```typescript
i18n.use(LanguageDetector).use(initReactI18next).init({
  resources,
  lng: "en",
  returnObjects: true, //to have objects in the translation
});
```

Now you can directly destructure the object like below in the component and use it

```typescript
const { t } = useTranslation();
const { line1, line2 } = t("description", {
 user: 'Nidhin'
})

<p>{line1}</p>
```

In this post we have covered the basics of reacti18next which you can use it in your application in quick time. Feel free to look at the document of react-i18next for more features

[https://react.i18next.com/guides/quick-start](https://react.i18next.com/guides/quick-start)