How to apply a formatter in nested translations with i18next

When using i18next for internationalization, handling nested translations and applying formatting functions is a common requirement. Below are the steps and examples for using nested translations and formatting functions in i18next.

Step 1: Initialize i18next Configuration

First, ensure that i18next is properly initialized and that the required language resources and plugins are loaded. For example, we need to install and configure i18next and react-i18next (if working in a React environment).

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

i18next
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          greeting: "Hello, {{name}}!",
          invitation: "You have {{count}} new messages.",
          nestedExample: "This is a nested translation: $t(greeting)"
        }
      }
    },
    lng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

Step 2: Nested Translations and Formatting

In the above example, we have set up some basic translation strings, where nestedExample serves as an example of nested translation. In i18next, using $t(key) allows embedding another translation.

To apply formatting, we can use variables such as {{name}} and {{count}} within translation strings and pass these variables when using translations.

Example: Using Nested Translations and Formatting

Let's examine a practical example where we need to format time and use it in nested translations.

javascript
i18next.addResources('en', 'translation', {
  timeMessage: "The current time is {{time, HH:mm:ss}}",
  detailedMessage: "Hello {{name}}, $t(timeMessage)"
});

// Add a custom formatting function
i18next.init({
  interpolation: {
    format: function(value, format, lng) {
      if (format === 'HH:mm:ss' && value instanceof Date) {
        return value.toISOString().substring(11, 19);
      }
      return value;
    }
  }
});

const message = i18next.t('detailedMessage', { name: 'John', time: new Date() });
console.log(message);  // Output: "Hello John, The current time is 14:25:30"

In this example, detailedMessage utilizes the nested translation timeMessage, and both employ formatting. Since timeMessage requires a time format, we add a formatting function during initialization that checks the format and returns the processed time format accordingly.

Summary

By leveraging i18next's nested translation capabilities and flexible formatting options, we can create complex and dynamic internationalized applications. In actual development, this technique helps us handle various language and format requirements, enhancing the internationalization level and user experience of the application.