i18next and ReactJS interantionalization with SimpleLocalize.io
Tags: javascript, typescript, react, i18n
Published: 2020-10-01 21:44:19

 ---
title: i18next and ReactJS interantionalization with SimpleLocalize.io 
published: true
description: "Are you looking for an easy way add more languages to your app? I will show you how to add i18n to your app using i18next library and how to manage translations in bigger project!"
tags: [javascript, typescript, react, i18n]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8999vn9bzjc3br03hh8e.jpg
canonical_url: https://simplelocalize.io/blog/posts/i18next-reactjs-localization/
---

# Background
We took original post inspiration from an awesome guy called [Aryclenio Xavier Barros](https://dev.to/aryclenio), who presented sample app for localizing app with i18next. You can [read it here](https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op). 
We expanded the idea by adding section about integrating i18next with translation management system. 


# How to start with i18n in ReactJS?

Thanks to that ReactJS is super popular library we got so many options. The most popular i18n libraries are i18next and yahoo/react-intl. Today I will show you how to integrate i18next into your ReactJS application.

# Create a sample project

I will start with very beginning and I will create sample app in ReactJS with TypeScript

```bash
yarn create react-app simplelocalize-i18next-example --template typescript
```

# Install dependencies:

```bash
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector
```

No we are ready to start!

# Configuration

I will create `i18n.ts` file where I will put whole i18next configuration, after that we will import this file in `index.ts`.
My `i18n.ts` looks as following:

```tsx
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    // default/fallback language 
    fallbackLng: 'en',
    ns: ["default"],
    defaultNS: "default",
    //detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath
    }
  })

export default i18n;
```

# Project `loadPath` variable

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `loadPath` variable. For this demo project you can use the `loadPath` from the example above!

# Enable `i18next` in application

Configuration is completed when you import `i18n.ts` file in `index.ts` just by adding `import './i18n';` Whole `index.ts` file should looks like this:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);
```

We are done! i18next library is ready to use.

# Using translations in the app

Now, let's use translations, and create very simple web page. 

## Import `useTranslation` hook

To import the i18next hook we use the following code:
```tsx
import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...
```

The `t` variable is a function used to load translations for given key.

## Using `t` in application code

`t` usage is very simple and clean:
```
t("USE_BUTTONS_BELOW")
```

in HTML it would look like following:

```tsx
 <p>{t("USE_BUTTONS_BELOW")}</p>
```

## Switching between language

Now it's a time to add option to switch languages. I will use simple buttons without any fancy CSS styles. :) I added 3 buttons for English, Spanish and Polish language.

```tsx
import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}

export default App;
```

# Let's check it!

Notice that translation is done in realtime! Cool!

![React Localization with i18next](https://dev-to-uploads.s3.amazonaws.com/i/r506c32f8xwy82o51oj1.gif)

[Checkout live version](https://i18next.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-i18next).