Services

The Internationalization package exposes IntlService service for default and customized internationalization of locales and LocalizationService for providing messages based on the current language.

Using the IntlService in Components

To use the service in your own components:

  1. Use the IntlProvider component in your parent component.
  2. If you require locale data that is different from the default en-US locale data, load the data you need in your parent component.
  3. In your child component, access the IntlService by using the provideIntlService function.
  4. Register your child component for internationalization by using the registerForIntl function.
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 };

Applying the LocalizationService in Components

The toLanguageString method of the LocalizationService accepts a key and a default value. To use the LocalizationService in your own components in conjunction with the LocalizationProvider:

  1. Use the LocalizationProvider component in your parent component.
  2. Set the language property.
  3. Register your child component for the localization service by using the registerForLocalization function.
  4. In your child component, access the LocalizationService by using the provideLocalizationService function. If the component is a stateless functional component, access it directly from the context object under the kendoLocalizationService key.
import React from 'react';
import ReactDOM from 'react-dom';

import { Chooser } from './Chooser.jsx';
import { MessageComponent } from './MessageComponent.jsx';
import { messages, todaysMessages, yesterdaysMessageKey, tomorrowsMessageKey } from './messages.js';
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';

const languages = [ 'en', 'es', 'bg' ];

const defaultMessages = {
    [yesterdaysMessageKey]: 'Yesterday was a good day!',
    [todaysMessages]: 'Today is a good day as well!',
    [tomorrowsMessageKey]: 'Tomorrow will be even better!'
};

loadMessages(messages['es'], 'es');
loadMessages(messages['bg'], 'bg');

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

    onChange = (e) => {
        this.setState({ language: e.target.value });
    }

    render() {
        const { language } = this.state;

        return (
            <div>
                <Chooser options={languages} value={language} onChange={this.onChange} label="Select language" />
                <LocalizationProvider language={language} >
                    <div>
                        <MessageComponent messageKey={yesterdaysMessageKey} defaultMessage={defaultMessages[yesterdaysMessageKey]} />
                        <MessageComponent messageKey={todaysMessages} defaultMessage={defaultMessages[todaysMessages]} />
                        <MessageComponent messageKey={tomorrowsMessageKey} defaultMessage={defaultMessages[tomorrowsMessageKey]} />
                    </div>
                </LocalizationProvider>
            </div>
        );
    }
}

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

import { registerForLocalization } from '@progress/kendo-react-intl';

export const MessageComponent = ({ messageKey, defaultMessage }, context) => {
    const localizationService = context.kendoLocalizationService;

    return (
        <span style={{ display: 'block' }} >{localizationService.toLanguageString(messageKey, defaultMessage)}</span>
    );
};

registerForLocalization(MessageComponent);
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 };
export const todaysMessages = 'today';
export const yesterdaysMessageKey = 'yesterday';
export const tomorrowsMessageKey = 'tomorrow';

export const messages = {
    'bg': {
        [yesterdaysMessageKey]: 'Вчера беше чудесен ден!',
        [todaysMessages]: 'Днес е страхотен ден също!',
        [tomorrowsMessageKey]: 'Утре ще бъде още по-хубаво!'
    },
    'es': {
        [yesterdaysMessageKey]: 'Ayer fue un buen dia!',
        [todaysMessages]: 'Hoy es un buen día también!',
        [tomorrowsMessageKey]: 'Mañana será aún mejor!'
    }
};

Customizing the Default Service

To override the default behavior of the internationalization service:

  1. Inherit IntlService and override the necessary methods.
  2. Inherit the IntlProvider component and override its getIntlService method.
  3. Use the customized IntlProvider component.
import React from 'react';
import ReactDOM from 'react-dom';

import { CustomFormatIntlProvider } from './CustomFormatIntlProvider.jsx';
import { DateFormatter } from './DateFormatter.jsx';

class App extends React.Component {
    render() {
        return (
            <CustomFormatIntlProvider>
                <DateFormatter date={new Date()} />
            </CustomFormatIntlProvider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
import { IntlProvider } from '@progress/kendo-react-intl';
import { CustomFormatIntlService } from './CustomFormatIntlService.jsx';

class CustomFormatIntlProvider extends IntlProvider {
    getIntlService() {
        return new CustomFormatIntlService(this.props.locale);
    }
}

export { CustomFormatIntlProvider };
import { IntlService } from '@progress/kendo-react-intl';

class CustomFormatIntlService extends IntlService {
    formatDate(value, format) {
        return `custom format: ${super.formatDate(value, format)}`;
    }
}

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

class DateFormatter extends React.Component {
    render() {
        return (
            <span> {provideIntlService(this).formatDate(this.props.date, 'EEEE, d.MM.y')}</span>
        );
    }
}

registerForIntl(DateFormatter);

export { DateFormatter };

In this article