Localization
library allows users to localize the default text contents
of the NumericTextBox to different cultures using the locale
property.
In NumericTextBox, spin buttons title for the tooltip will be localized based on the culture.
Locale key | en-US (default) |
---|---|
incrementTitle | Increment value |
decrementTitle | Decrement value |
To load translation object in your application use load
function of L10n
class.
The below example demonstrates the NumericTextBox in German
culture with the spin buttons tooltip.
import { L10n } from '@syncfusion/ej2-base';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
L10n.load({
'de': {
'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'}
}
});
// initializes NumericTextBox component
// sets `German` culture using the culture value 'de'
ReactDOM.render(<NumericTextBoxComponent locale='de' value={10} />,document.getElementById('numericContainer'));
Internationalization library provides support for formatting and parsing the number by using the
official Unicode CLDR JSON data and also provides the
loadCldr
method to load the culture specific CLDR JSON data. The NumericTextBox comes with built-in
internationalization support to adapt based on culture. For more information about internationalization,
refer to this link.
By default, all the Essential JS 2 component are specific to English culture (‘en-US’).
If you want to go with the different culture other than English
, follow the below steps.
CLDR-Data
package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data,
refer to this link.npm install cldr-data --save
Once the package installed, you can find the culture
specific JSON data under the location \node_modules\cldr-data
.
app.tsx
file.app.tsx
file as like the below code snippets.import * as currencies from 'cldr-data/main/de/currencies.json';
import * as numbers from 'cldr-data/main/de/numbers.json';
import * as currencyData from 'cldr-data/supplemental/currencyData.json';
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
loadCldr(numberingSystems, currencies, numbers, currencyData);
if you are facing the error
/node_modules/cldr-data/main/de/*.json (1,1): unused expression, expected an assignment or function call
when you are adding the json files to render the culture sample, then add the below configuration in yourtslint.json
file
"linterOptions": {
"exclude": [
"*.json",
"**/*.json"
]
}
locale
property.The below example demonstrates the NumericTextBox in German
culture with the EUR
currency format.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { loadCldr,L10n } from '@syncfusion/ej2-base';
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as currencyData from './currencyData.json';
import * as numbers from './numbers.json';
import * as currencies from './currencies.json';
loadCldr(numberingSystems, currencyData, numbers, currencies);
L10n.load({
'de': {
'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'}
}
});
// initializes NumericTextBox component
// sets `German` culture using the culture value 'de'
// sets the 'EUR' currency format
ReactDOM.render(<NumericTextBoxComponent locale='de' currency='EUR' format='c2' value={100} >
</NumericTextBoxComponent>,document.getElementById('numericContainer'));
RTL provides an option to switch the text direction and layout of the NumericTextBox component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL NumericTextBox, set the enableRtl
to true.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { loadCldr,L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AE': {
'numerictextbox': { incrementTitle: 'قيمة الزيادة', decrementTitle: 'قيمة تناقص'}
}
});
// initializes NumericTextBox component
// sets `German` culture using the culture value 'de'
// sets the 'EUR' currency format
ReactDOM.render(<NumericTextBoxComponent locale='ar-AE' enableRtl='true' floatLabelType='Auto' placeholder='أدخل القيمة' value={100} >
</NumericTextBoxComponent>,document.getElementById('numericContainer'));