Getting Started with KendoReact Internationalization

The KendoReact Internationalization package applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers.

Together with the Localization options, the Internationalization package provides the globalization features of KendoReact. For more information on the globalization aspects which are available for each component, refer to the article on globalization support. For more information on the date and number formats KendoReact supports, refer to the kendo-intl GitHub repository.

The package exports the following types of provider components:

  • An IntlProvider component and an API for the parsing and formatting of dates and numbers.
  • A LocalizationProvider component and an API for the translation of component messages into different languages.

The KendoReact Internationalization feature is part of the KendoReact library which provides native Kendo UI components for the React ecosystem and is available under the kendo-react-intl NPM package.

Basic Usage

The following example demonstrates how to utilize the IntlProvider component in basic use-case scenarios.

import React from 'react';
import ReactDOM from 'react-dom';

/* CLDR Data */

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import bgNumbers from 'cldr-numbers-full/main/bg/numbers.json';
import bgLocalCurrency from 'cldr-numbers-full/main/bg/currencies.json';
import bgCaGregorian from 'cldr-dates-full/main/bg/ca-gregorian.json';
import bgDateFields from'cldr-dates-full/main/bg/dateFields.json';

import usNumbers from 'cldr-numbers-full/main/en/numbers.json';
import usLocalCurrency from 'cldr-numbers-full/main/en/currencies.json';
import usCaGregorian from 'cldr-dates-full/main/en/ca-gregorian.json';
import usDateFields from'cldr-dates-full/main/en/dateFields.json';

import gbNumbers from 'cldr-numbers-full/main/en-GB/numbers.json';
import gbLocalCurrency from 'cldr-numbers-full/main/en-GB/currencies.json';
import gbCaGregorian from 'cldr-dates-full/main/en-GB/ca-gregorian.json';
import gbDateFields from'cldr-dates-full/main/en-GB/dateFields.json';

import { IntlProvider, load } from '@progress/kendo-react-intl';
import { DateFormatter } from './DateFormatter.jsx';
import { CurrencyFormatter } from './CurrencyFormatter.jsx';
import { Chooser } from './Chooser.jsx';

load(
    likelySubtags,
    currencyData,
    weekData,
    bgNumbers,
    bgLocalCurrency,
    bgCaGregorian,
    bgDateFields,
    usNumbers,
    usLocalCurrency,
    usCaGregorian,
    usDateFields,
    gbNumbers,
    gbLocalCurrency,
    gbCaGregorian,
    gbDateFields
);
const locales = [ 'en-US', 'bg-BG', 'en-GB' ];

class App extends React.Component {
    state = { locale: 'en' };

    render() {
        const { locale } = this.state;
        return (
            <IntlProvider locale={locale}>
                <div className="example-wrapper row">
                        <Chooser value={locale} onChange={this.onChange} options={locales} label="Select locale" />
                        <DateFormatter />
                        <CurrencyFormatter />
                </div>
            </IntlProvider>
        );
    }

    onChange = (event) => {
        this.setState({ locale: event.target.value });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

Installation

Download and install the package by running the npm install --save @progress/kendo-react-intl command.

Dependencies

The Internationalization package requires the following peer dependencies that have to be installed by your application:

  • react 16.8.2*
  • react-dom

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:

  • @telerik/kendo-intl
  • prop-types
 /