In this article we discuss, React project localization with i18next, How to set up localization with react-i18next or React App Localization with react-i18next, or A Guide to React Localization with i18next

What is software localization?

Software localization means this is the process of adapting software products to the linguistic, technical, and cultural, requirements of a target market.

So this process is labor-intensive and often requires a significant amount of time from the software development teams.

React localization with i18next

If we building an application that meets the needs of a local market is paramount for software developers who want to improve user satisfaction interfaces and reach business goals by increasing conversion rates.

With the React applications, there are so many internationalization options to target this type of audience.

In this article, we will see one of the most popular solutions out there: i18next.

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

This framework non-stop adapts an application to specific local markets and cultures thanks to the localization process, also known as l10n.

The React Project localization goes beyond translating words from one language to another.

In addition to the translation, it helps you consider cultural differences like unit placement, currency, number and date formatting, pluralization, and even the local appearance.

IF you want then buy a good, reliable, secure web hosting service from here: click here

Why use the i18next framework?

We use the i18next framework because the i18next framework is flexible.

And also due to its support for plugins, letting us add features that we would otherwise have to build ourselves.

We also have options to separate translations into different files and load them when we need to require them.

So this means we do not need to load all the translation files before loading a page, and reduce slow loading times.

Installation

Firstly, we create a react project using create-react-app

npx create-react-app app-name

Now go to the inside project folder

cd app-name

Install required packages

Now, we will install the required i18next packages here

npm install i18next react-i18next i18next-browser-languagedetector

Configure i18n file

Create a localefolder inside src directory
Create a jsonfile inside locale directory and add your translations

{
    "Hello world": "Hello world",
    "This is a simple react application": "This is a simple react application"
}

And need to create fr.json file beside en.json

{
    "Hello world": "Bonjour le monde",
    "This is a simple react application": "Ceci est une simple application de réaction"
}

Create a i18n configuration file inside locale directory

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import en from "./en.json";
import fr from "./fr.json";

const resources = {
  en: {
    translation: en,
  },
  fr: {
    translation: fr,
  },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    resources: resources,
  });

export const _t = i18n.t.bind(i18n);
export default i18n;

Final Steps

Finally, need to Import i18n file inside the index.js file

import React from "react";
import ReactDOM from "react-dom/client";
import "./locale/i18n";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

reportWebVitals();

Using translations

Now, import _t function anywhere you want to translate the text

<p>{_t('Hello world')}</p>

You can changing the language now

import logo from "./logo.svg";
import "./App.css";
import { _t } from "./locale/i18n";
import { useTranslation } from "react-i18next";

function App() {
const { i18n } = useTranslation();

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 style={{ marginBottom: 0 }}>{_t("Hello world")}</h1>
<p>{_t("This is a simple react application")}</p>
<div>
<button onClick={() => i18n.changeLanguage("en")}>English</button>
<button onClick={() => i18n.changeLanguage("fr")}>French</button>
</div>
</header>
</div>
);
}

export default App;

That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.

React Project Localization with i18next