Introduction

Internationalization (i18n) in LWCs is the process used to adapt an LWC to various languages and regions without duplicating code.

<aside> 💡 If you are not familiar with Internationalization (i18n) in LWC, review this section:

i18N - Internationalization for LWC

</aside>

This is a recap from the previous link, In LWC, this involves several key steps:

1. User Locale Information:
   • Retrieve user locale settings using the @salesforce/i18n/* module. This helps in determining the language and region of the user.
2. Custom Labels:

   • Use Salesforce Custom Labels to store text values. This allows you to define text in one place and reference it throughout your code. Custom labels can be translated into multiple languages, making it easy to support multilingual applications.

   • To use a custom label in your component, import it like this:

     import myLabel from '@salesforce/label/c.myLabel';
     

• Formatting:

  • Handle different formats for numbers, currencies, dates, and times according to the user's locale. This ensures that all data is presented in a way that is familiar and understandable to the user.

  • Use JavaScript’s Intl object for formatting:

    import USER_LOCALE from "@salesforce/i18n/locale";
    ...
    let formattedDate = new Intl.DateTimeFormat(USER_LOCALE).format(new Date());
    

• Drop-down Lists:

  • Ensure the options in drop-down lists are localized. This means that all selectable options should be presented in the user's language.
  • Populate drop-down lists with values from custom labels or translated data to maintain consistency.

Best Practices & my recommendations

• Avoid Hard-Coding Text: Always use custom labels or resources that can be translated.
• Test with Different Locales: Regularly test your app with various locale settings to ensure it works as expected across different languages and regions (especially for languages with symbols and RTL).
• Consistent Formatting: Use consistent formatting methods for dates, numbers, and currencies to avoid confusion for the current user. As you will see in the following example, quantities, currencies and many other dimensions are represented differently in many countries.

By following these guidelines, you can create LWC applications that are easily adaptable to different languages and regions, providing a better user experience for a global audience.

LWC example

This LWC tries to showcase the basic capabilities that allow to present data on the user’s locale. Also, it is included how to use a custom locale, so both are compared.

<aside> 💡 If you are a Japanese user, please change the value for this variable anotherLocale = "ja-JP” to another different locale like anotherLocale = "es-ES” or any other so you can see the difference.

</aside>

<aside> 📂 This LWC is not available in the LWC Recipes Github repository, but in this reposiroty instead: https://github.com/egraells/lwc-recipes-ege/tree/main/force-app/main/default/lwc/egei18n

</aside>

Meta configuration file