Internationalization in Syncfusion® React Components
Internationalization (I18n) controls how dates, numbers, percentages, and currencies are formatted and parsed according to a specific culture. Syncfusion® React components use the Unicode CLDR dataset to provide culturally accurate formatting. By default, components use en-US as the culture and USD as the currencyCode.
Getting started with Internationalization
Follow these steps to apply culture-specific formatting in your React application.
Installing Syncfusion® React package
To use the React CLDR data, install the @syncfusion/react-cldr-data package:
Import and load culture data
Import the required culture JSON files and load them using the loadCldr function from @syncfusion/react-base. This registers the cultural data for use by Syncfusion components and formatting utilities.
Apply locale using Provider
Wrap your application with the Syncfusion® Provider context and set the locale prop to the target culture code. All nested components will render using the specified culture, and currency formats are applied automatically based on the locale.
This sample demonstrates rendering the Grid component in French culture, where the currency code EUR is automatically applied for any currency-related formatting.
Parsing and Formatting Support
Syncfusion® provides powerful utilities to parse user input and format output based on the active locale.
Numbers parsing and formatting
Use NumberFormatOptions to define locale-specific patterns for formatting and parsing numbers, currencies, and percentages.
parseNumber
The parseNumber method converts a locale-specific string representation of a number into its numeric value. It takes two arguments a string value and a NumberFormatOptions object. It returns the corresponding numeric value or null if parsing fails.
formatNumber
The formatNumber method converts a numeric value into a locale-specific string representation. It takes two arguments a numeric value and a NumberFormatOptions object. It returns the formatted string.
Dates parsing and formatting
Use DateFormatOptions to define locale-specific patterns for parsing and formatting date and time values.
parseDate
The parseDate method converts a locale-specific date/time string into a Date object. It takes two arguments a string value and a DateFormatOptions object. It returns the corresponding Date object or null if parsing fails.
formatDate
The formatDate method converts a Date object into a locale-specific string representation of the date and/or time. It takes two arguments a Date object and a DateFormatOptions object. It returns the formatted string.