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

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

In this article

 /