Getting Started with KendoReact Internationalization
This guide provides the information you need to start using the KendoReact Internationalization component—it includes instructions about the available installation approaches, the required dependencies, the code for running the project, and links to additional resources.
After the completion of this guide, you will be able to achieve an end result as demonstrated in the following example.
Before You Begin
npm create vite@latest my-app -- --template reactThis guide requires that you have basic knowledge of React and TypeScript, and that you have already created a blank React project.
You can speed up the development of your KendoReact application with the Kendo UI Template Wizard for Visual Studio Code.
Install the Component
npm i @progress/kendo-react-intlUsing the Package
- After successfully installing the Internationalization package, use the
useInternationalizationhook to access theIntlService:
import { useInternationalization } from '@progress/kendo-react-intl';
const intl = useInternationalization();- Then, use the
formatNumberfunction of the service to format the number:
<h5>Result: {intl.formatNumber(decimal, 'n2')}</h5>- Run and serve the application by running the following command in the root folder.
npm start- Point your browser to http://localhost:4200 to see the formatted number on the page.
Activating Your License Key
Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.
Follow the instructions on the KendoReact My License page to activate your trial or commercial license. You can skip this step if your application already contains a KendoReact license file.
Next Steps
- Loading Default and Additional Locale Data
- Changing the Current Locale at Runtime
- Services
- API Reference of the Internationalization
Dependencies
The Internationalization package requires the following peer dependencies that have to be installed by your application:
- react 16.8.2*
- react-dom
- @progress/kendo-licensing
The following dependencies are required only when you apply internationalization to a locale that is different from the default en-US one.
- cldr-core
- cldr-dates-full
- cldr-numbers-full
The following dependencies will be installed automatically:
- @progress/kendo-intl
- prop-types