Loading Data

The Internationalization package enables you to load default and additional locale data.

Default Locale Data

The default IntlService service implementation supports basic operations in the en-US locale. Some operations, such as the parsing and formatting of currencies other than USD, require you to load the full locale information. For more details, refer to the following section on loading additional locale data.

Additional Locale Data

When you parse and format dates and numbers for a locale that is different from the default en-US one, you have to load CLDR data.

The CLDR data is available in the following locations:

  1. CLDR data is split into functional groupings among the cldr-core, cldr-numbers-full, cldr-dates-full, and other packages which directly download the CLDR data files.

    The KendoReact components use the cldr-core, cldr-dates-full, and cldr-numbers-full packages. For more information about the available CLDR packages, refer to the article on JSON packing.

  2. CLDR data is combined in the cldr-data NPM package which unzips the files in your node_modules folder through a post-installation script.

Loading CLDR Data

As a data reference for all locales, the following examples use the cldr-core, cldr-numbers-full, and cldr-dates-full packages.

  1. Install the needed CLDR packages by running the following command:

    npm install --save cldr-core cldr-numbers-full cldr-dates-full
  2. Import and load the required files in your component from the following locations:

    • cldr-core/supplemental/LOCALE_FILE.json
    • cldr-PACKAGE_NAME/main/LOCALE_NAME/LOCALE_FILE.json

You can also import the data from the cldr-data package at the cldr-data/main/LOCALE_NAME/LOCALE_FILE.json location.

The following example demonstrates how to load the locale files in your component.

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

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 deNumbers from 'cldr-numbers-full/main/de/numbers.json';
import deLocalCurrency from 'cldr-numbers-full/main/de/currencies.json';
import deCaGregorian from 'cldr-dates-full/main/de/ca-gregorian.json';
import deDateFields from 'cldr-dates-full/main/de/dateFields.json';

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

load(
    likelySubtags,
    currencyData,
    weekData,
    bgLocalCurrency,
    bgNumbers,
    bgCaGregorian,
    bgDateFields,
    deLocalCurrency,
    deNumbers,
    deCaGregorian,
    deDateFields
);

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            date: new Date()
        };
    }
    render() {
        const { date } = this.state;

        return (
            <div className="example-wrapper row">
                <div className="col-xs-12 col-sm-4 example-col">
                    Date: <strong>{date.toString()}</strong>
                </div>
                <div className="col-xs-12 col-sm-4 example-col">
                    Formatted using the default "bg" locale:
                        <strong>
                        <IntlProvider locale="bg-BG">
                            <DateFormatter date={date} />
                        </IntlProvider>
                    </strong>
                </div>
                <div className="col-xs-12 col-sm-4 example-col">
                    Formatted using the "de" locale:
                        <strong>
                        <IntlProvider locale="de">
                            <DateFormatter date={date} />
                        </IntlProvider>
                    </strong>
                </div>
            </div>
        );
    }
}

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>
                <span> {provideIntlService(this).formatDate(this.props.date, 'EEEE, d.MM.y')}</span>
            </div>
        );
    }
}

registerForIntl(DateFormatter);

export { DateFormatter };

The Internationalization package provides options for loading locale data to the following projects:

create-react-app Applications

If you work with applications that are created with create-react-app, load the desired locales and the supplemental data. For more information on which files are required for specific features, refer to the documentation on the KendoReact Internationalization package.

The following example demonstrates the sample configuration for loading locale data in applications that are created with create-react-app.

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 localCurrency from 'cldr-numbers-full/main/es/currencies.json';
import numbers from 'cldr-numbers-full/main/es/numbers.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';

import { IntlProvider, load } from '@progress/kendo-react-intl';

load(
    likelySubtags,
    currencyData,
    weekData,
    localCurrency,
    numbers,
    caGregorian,
    dateFields,
);

class App extends React.Component {
    render() {
        return (
            <IntlService locale="es">
                /* your content here*/
            </IntlService>
        )
    }
}

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

SystemJS-Integrated Applications

  1. Install the systemjs-plugin-json package.

    npm install --save systemjs-plugin-json
  2. Load the desired locales and the supplemental data. For more information on which files are required for specific features, refer to the documentation on the KendoReact Internationalization package.

  3. Provide the necessary settings in the systemjs.config.js file.

    map: {
       // other libraries
       'cldr-core': 'npm:cldr-core',
       'cldr-numbers-full': 'npm:cldr-numbers-full',
       'cldr-dates-full': 'npm:cldr-dates-full',
       // or 'cldr-data': 'npm:cldr-data',
       'systemjs-plugin-json': 'npm:systemjs-plugin-json',
    }
    ...
    meta: {
       '*.json': {
           loader: 'systemjs-plugin-json'
       }
    },
    ...
    packages: {
       'systemjs-plugin-json': {
           defaultExtension: 'js',
           main: 'json.js'
       }
    }

The following example demonstrates the sample configuration for loading locale data in applications that use the SystemJS module loader.

import React from 'react';

/* Loading CLDR data */
import { IntlProvider, load } from '@progress/kendo-react-intl';

load(
    require("cldr-core/supplemental/likelySubtags.json"),
    require("cldr-core/supplemental/currencyData.json"),
    require("cldr-core/supplemental/weekData.json"),
    require("cldr-numbers-full/main/bg/numbers.json"),
    require("cldr-numbers-full/main/bg/currencies.json"),
    require("cldr-dates-full/main/bg/dateFields.json"),
    require("cldr-dates-full/main/bg/ca-gregorian.json"),
    require("cldr-dates-full/main/bg/timeZoneNames.json")
);

class App extends React.Component {
    render() {
        return (
            <IntlService locale="bg">
                /* your content here*/
            </IntlService>
        )
    }
}

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

In this article