New to KendoReact? Start a free 30-day trial

Services

The Internationalization package exposes IntlService service for default and customized internationalization of locales and LocalizationService for providing messages based on the current language.

Using the IntlService in Components

To use the service in your own components:

  1. Use the IntlProvider component in your parent component.
  2. If you require locale data that is different from the default en-US locale data, load the data you need in your parent component.
  3. In your child component, access the IntlService by using the provideIntlService function.
  4. Register your child component for internationalization by using the registerForIntl function.
Example
View Source
Edit In Stackblitz  
Change Theme:

Applying the LocalizationService in Components

The toLanguageString method of the LocalizationService accepts a key and a default value. To use the LocalizationService in your own components in conjunction with the LocalizationProvider:

  1. Use the LocalizationProvider component in your parent component.
  2. Set the language property.
  3. Register your child component for the localization service by using the registerForLocalization function.
  4. In your child component, access the LocalizationService by using the provideLocalizationService function. If the component is a stateless functional component, access it directly from the context object under the kendoLocalizationService key.
Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Default Service

To override the default behavior of the internationalization service:

  1. Inherit IntlService and override the necessary methods.
  2. Inherit the IntlProvider component and override its getIntlService method.
  3. Use the customized IntlProvider component.
Example
View Source
Edit In Stackblitz  
Change Theme: