Internationalization

Introduction

Internationalization is the process of structuring your code and user interface to support localization. Hopper supports many aspects of localization for many components out of the box, including translations for builtin strings, localized date and number formatting. By using Hopper to build your applications, these aspects of internationalization are handled for you.

To set the locale of your application, follow the procedure described in the HopperProvider documentation.

Supported locales

Hopper currently supports translations for 2 locales. They are listed below.

• English (United States) - en-US
• French (Canada) - fr-CA

Optimizing bundle size

Hopper uses React-Aria for internationalization, which is a peer dependency. This means that you must install react-aria in your application. React-Aria includes translations for over 30 languages. This is inclusive to the most users out of the box, but comes at the cost of bundle size. Since applications using Hopper do not support all of these locales, you can use React-Aria build plugins to include only the languages that we support in your JavaScript bundle.

The complete process is described in the React-Aria documentation.

Utility Methods

React-Aria (a peer dependency of Hopper) provides some utility methods to help with localization. See useDateFormatter, useNumberFormatter, and useCollator for more information. The Internationalized collection of libraries provides framework-agnostic utilities for representing and manipulating dates and times, as well as parsing and formatting numbers across many locales, calendar systems and numbering systems.