All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Internationalization Overview

The 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 Kendo UI for React. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

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.

For more information on the date and number formats Kendo UI for React supports, refer to the kendo-intl GitHub repository.

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';

/* CLRD Data */
import likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
import currencyData from'cldr-data/supplemental/currencyData.json';
import weekData from'cldr-data/supplemental/weekData.json';

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

import gbLocalCurrency from'cldr-data/main/en-GB/currencies.json';
import gbNumbers from'cldr-data/main/en-GB/numbers.json';
import gbCaGregorian from'cldr-data/main/en-GB/ca-gregorian.json';
import gbDateFields from'cldr-data/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,
    bgLocalCurrency,
    bgNumbers,
    bgCaGregorian,
    bgDateFields,
    gbLocalCurrency,
    gbNumbers,
    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')
);
import React from 'react';
import { registerForIntl, provideIntlService } from '@progress/kendo-react-intl';

class DateFormatter extends React.Component {
    render() {
        return (
            <div className="col-xs-12 col-sm-6 example-col">
                <label>Locale date:</label> {provideIntlService(this).formatDate(new Date(2000, 10, 6), 'EEEE, d.MM.y')}
            </div>
        );
    }
}

registerForIntl(DateFormatter);

export { DateFormatter };
import React from 'react';
import { registerForIntl, provideIntlService } from '@progress/kendo-react-intl';

class CurrencyFormatter extends React.Component {
    render() {
        return (
            <div className="col-xs-12 col-sm-6 example-col">
                <label>Locale currency:</label> {provideIntlService(this).formatNumber(100, 'c')}
            </div>
        );
    }
}

registerForIntl(CurrencyFormatter);

export { CurrencyFormatter };
import React from 'react';

const Chooser = (props) => (
        <div className="col-xs-12 col-sm-12 example-col">
            <label>
                {props.label}:
                <select
                    style={{ width: 250, marginLeft: 10 }}
                    value={props.value}
                    onChange={props.onChange}
                >
                    { props.options.map((option, key) => <option key={key} value={option}>{option}</option>) }
                </select>
            </label>
    </div>
);

export { Chooser };

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
  • react-dom
  • cldr-data—Required only when you apply internationalization for a locale that is different from the default en-US one.

The following dependencies will be installed automatically:

  • @telerik/kendo-intl
  • prop-types

Functionality and Features

In this article