Getting Started with KendoReact Server Internationalization

The KendoReact Server Internationalization package applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers. For more information on the date and number formats KendoReact supports, refer to the kendo-intl GitHub repository.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

How the Internationalization Works

The KendoReact Server Internationalization feature provides you with a way to parse and/or format dates and numbers either on the server or on the client.

  • Load locales on the server—To use the i18n feature on the server, utilize the IntlProvider component. Only the chosen locale language will be sent over to the client. This will result in a lesser bundle size, as the client will receive only the current locale information.

  • Load locales on the client—To use the i18n feature on the client, utilize the useInternationalization hook. This way you can use all of the methods for parsing and formatting dates and numbers. The hook can be used in a client component while being wrapped in an IntlProvider component. This way it will be bound to a specific locale. If its not wrapped in the component, you will need to pass down the locale which will be used.

Basic Usage

The following example demonstrates how to utilize the IntlProvider component in basic scenario.

View Source
Change Theme:

Functionality and Features

Additional Resources