Internationalization
Adapting components to respect languages and cultures of users around the world is an great way to make your application accessible to the widest number of people.
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.