Reacting to Locale Changes

The Internationalization package enables you to react to changes in the locale data or language.

To react to locale changes, call the provideIntlService function inside the render function of the component.

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

To react to language changes, use the provideLocalizationService function inside the render function of the component. 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!'
    }
};

In this article