top of page

How to Localize a React App Using Automatic i18next Translation

Reaching a broader audience often requires localizing your application. This blog post will guide you through localizing a React application using i18next, a comprehensive internationalization framework for JavaScript. Additionally, we'll demonstrate how to use i18nowAI to automate the translation process efficiently.


React

Step 1: Set Up i18next in Your React Project


To integrate i18next into your React project, start by installing the necessary packages:


npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Once installed, you need to set up i18next. Create a new file named i18n.js in your project's src folder. This placement helps in keeping all configuration related to internationalization in one place, making it easy to manage. Here's how you can configure i18next in the i18n.js file:


import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
  .use(HttpBackend) // loads translations using http
  .use(LanguageDetector) // detects the user's language
  .use(initReactI18next) // passes i18n down to React
  .init({
    fallbackLng: 'en',
    debug: true,
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });
export default i18n;

For more details on setting up, refer to the official i18next documentation.


Step 2: Create JSON Files for Translations


i18next uses JSON files to store translations. Create a directory structure under public/locales in your React project. Within this directory, create JSON files for each language you plan to support, such as en.json, es.json, etc. Here is an example en.json file containing basic translations:


{
  "welcome_message": "Welcome to Our Application!",
  "about_us": "About Us",
  "contact_us": "Contact Us",
  "login": "Login",
  "logout": "Logout",
  "user_profile": "User Profile",
  "settings": "Settings",
  "search": "Search",
  "language_select_label": "Choose your language:",
  "home": "Home",
  "page_not_found": "Page Not Found",
  "error_message": "An error has occurred. Please try again later.",
  "footer_text": "Copyright 2021, All Rights Reserved"
}

Step 3: Use i18nowAI to Generate Automatic i18next Translations


To simplify the translation process, use i18nowAI. Start by signing up at www.i18now.ai. Then, follow these steps:


1. Upload your source text JSON file: Upload the JSON file containing the strings in the original language.

2. Select target languages: Choose the languages into which you want your application translated.

3. Download the translated JSON files: Once i18nowAI has processed your files, download them and replace the original ones in your project.


For more information on how to use i18nowAI with i18next, refer to these helpful articles:


Step 4: Use the Translations in Your React App


Finally, to use the translations in your application, employ the useTranslation hook from react-i18next. Here’s how you might do it:


import React from 'react';
import { useTranslation } from 'react-i18next';
function HomePage() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('welcome_message')}</h1>
      <p>{t('footer_text')}</p>
    </div>
  );
}
export default HomePage;

This setup will enable your application to be accessible in multiple languages, enhancing user experience and expanding your global reach. Follow these steps to efficiently manage translations in your React application.

תגובות

bottom of page