All Components

Internationalization Overview

The Internationalization package provides an IntlProvider component and an API for the parsing and formatting of dates and numbers.

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 Internationalization package 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 { LocaleChooser } from './LocaleChooser.jsx';

load(
    likelySubtags,
    currencyData,
    weekData,
    bgLocalCurrency,
    bgNumbers,
    bgCaGregorian,
    bgDateFields,
    gbLocalCurrency,
    gbNumbers,
    gbCaGregorian,
    gbDateFields
);

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

    render() {
        const { locale } = this.state;
        return (
            <IntlProvider locale={locale}>
                <div className="example-wrapper row">
                        <LocaleChooser locale={locale} onChange={this.onChange} />
                        <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 LocaleChooser = (props) => (
        <div className="col-xs-12 col-sm-12 example-col">
            <label>
                Select locale:
                <select
                    style={{ width: 250, marginLeft: 10 }}
                    value={props.locale}
                    onChange={props.onChange}
                >
                    <option value="en">en-US</option>
                    <option value="bg-BG">bg-BG</option>
                    <option value="en-GB">en-GB</option>
                </select>
            </label>
    </div>
);

export { LocaleChooser };

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

Features and Functionalities

Internationalization by Components

Currently, the following components support internationalization through the Kendo UI Internationalization package for React:

In this article