How to array language change with i18n

When developing multilingual applications, internationalization (i18n) is a crucial component. To address your query, I'll explain how to use i18n to change the language content within arrays.

Step 1: Define Resource Files

First, we need to define resource files for each supported language. These resource files will contain all the translated strings. For example, in JSON format, we can have the following structure:

English (en.json):

json
{
  "greetings": ["Hello", "Good morning", "Good evening"]
}

Chinese (zh.json):

json
{
  "greetings": ["你好", "早上好", "晚上好"]
}

Step 2: Configure the i18n Library

Next, we need to configure the i18n library in the project. Here, we'll use the JavaScript i18next library as an example:

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import translationEN from './locales/en.json';
import translationZH from './locales/zh.json';

const resources = {
  en: {
    translation: translationEN
  },
  zh: {
    translation: translationZH
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en", // Default language
    keySeparator: false,
    interpolation: {
      escapeValue: false
    }
  });

Step 3: Use Translations

Once configured, we can use these translations in the application. For example, in a React component:

javascript
import React from 'react';
import { useTranslation } from 'react-i18next';

function Greeting() {
  const { t } = useTranslation();

  return (
    <ul>
      {t('greetings', { returnObjects: true }).map((greeting, index) => (
        <li key={index}>{greeting}</li>
      ))}
    </ul>
  );
}

In this example, the useTranslation hook helps us retrieve the greetings array, and we map it to display each greeting in a list. When switching languages, i18next automatically extracts and updates the content from the corresponding resource files.

Summary

By following these steps, we can implement language switching in multilingual applications, including strings within arrays. This is particularly important for global application development, as it provides a more user-friendly experience and allows reaching a broader user base.