DEV Community

Cover image for i18next and ReactJS interantionalization with SimpleLocalize.io
Jakub Pomykała
Jakub Pomykała

Posted on • Originally published at simplelocalize.io

i18next and ReactJS interantionalization with SimpleLocalize.io

#javascript #typescript #react #i18n

Background

We took original post inspiration from an awesome guy called Aryclenio Xavier Barros, who presented sample app for localizing app with i18next. You can read it here.
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

yarn create react-app simplelocalize-i18next-example --template typescript
Enter fullscreen mode Exit fullscreen mode

Install dependencies: 

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

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:

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;
Enter fullscreen mode Exit fullscreen mode

Project loadPath variable

Create a 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:

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')
);
Enter fullscreen mode Exit fullscreen mode

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:

import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

in HTML it would look like following:

 <p>{t("USE_BUTTONS_BELOW")}</p>
Enter fullscreen mode Exit fullscreen mode

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.

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;
Enter fullscreen mode Exit fullscreen mode

Let's check it!

Notice that translation is done in realtime! Cool!

React Localization with i18next

Checkout live version

Project code is available on GitHub.

Top comments (2)

Collapse
 
jvarness profile image
Jake Varness •

I love the idea of using i18n. My biggest concern has always been about proper internationalization or localization of user facing strings. Without having things translated and localized correctly, users from other countries begin to have bad experiences.

Super helpful for those who can get ahold of properly localized strings though, nice work! 😁

Collapse
 
jpomykala profile image
Jakub Pomykała •

Hey Jake!
Checkout my new article about FormatJS :)

dev.to/jpomykala/reactintl-and-rea...

Read next

bluxart profile image

Preloader Animation #GSAP

Alessio -

cristiancavelasquez profile image

Embedding a Power BI Dashboard: A Secure and Simple Solution

cristian velasquez -

vs-borodin profile image

Building a Collapsible UI Component in Angular: From Concept to Implementation 🚀

Vyacheslav Borodin -

gauravadhikari1997 profile image

How to customize Strapi Dashboard / Home Page: The Right Way

Gaurav Adhikari -