Implementing Internationalization and Localization in JavaScript Apps

// English (default) resource file
const messages_en = {
  greeting: 'Hello, {name}!',
  // more key-value pairs for other UI texts
};

// Spanish resource file
const messages_es = {
  greeting: '¡Hola, {name}!',
  // more key-value pairs for other UI texts
};

// Function to get the appropriate resource based on the user's locale
function getMessages(locale) {
  switch (locale) {
    case 'es':
      return messages_es;
    default:
      return messages_en;
  }
}

// Sample function to display internationalized text
function displayGreeting(name, locale) {
  const messages = getMessages(locale);
  const greeting = messages.greeting.replace('{name}', name);
  console.log(greeting);
}

// Example usage
const userName = 'John Doe';
displayGreeting(userName, 'en'); // Output: Hello, John Doe!
displayGreeting(userName, 'es'); // Output: ¡Hola, John Doe!

// Function to fetch the user's preferred locale from browser settings or user preferences
function getUserLocale() {
  // Sample implementation; in a real app, this could be more sophisticated
  return navigator.language || 'en'; // If not available, default to English
}

// Example function to load localized resources
function loadLocalizedResources() {
  const userLocale = getUserLocale();
  const messages = getMessages(userLocale);
  // ... Load other locale-specific resources (date formats, number formats, etc.) here
  return messages;
}

// Function to localize the entire UI
function localizeUI() {
  const messages = loadLocalizedResources();
  // Replace content in the UI with the localized versions
  document.getElementById('greeting').textContent = messages.greeting.replace('{name}', userName);
  // ... Update other UI elements with their respective localized content
}

// Example usage
const userName = 'John Doe';
localizeUI();

// Install the library: npm install i18next

import i18next from 'i18next';

// Initialize i18next with resource files
i18next.init({
  lng: getUserLocale(),
  resources: {
    en: { translation: messages_en },
    es: { translation: messages_es },
    // more locales and their respective resource files
  },
});

// Example usage with i18next
function displayGreeting(name) {
  const greeting = i18next.t('greeting', { name });
  console.log(greeting);
}