React-Intl use multiple locales at the same time

Question

my use case is that I have a react app, which needs to be localized in a specific ui language - lets say german. For number and datetime formats we have another language setting, which may differs from the ui language. So lets say this cultrue is en-US.

I set up the IntlProvider...

<IntlProvider messages={messages[language]} locale={language} defaultLocale="en">
        <NumberFormatCultureContextProvider value={timeFormatLanguage}>{children}</NumberFormatCultureContextProvider>
</IntlProvider>

and created a custom React.Context for the second language...

import React from "react";
import { assertNotUndefined } from "./Assertions";

const NumberFormatCultureContext = React.createContext<string>("en");

export function useDateTimeCulture(): string {
    return assertNotUndefined(React.useContext(NumberFormatCultureContext), "Missing 'NumberFormatCultureContext'");
}

export const NumberFormatCultureContextProvider = NumberFormatCultureContext.Provider;

In the child components I want to do something like that:

    const intl = useIntl();

    const dateTimeCulture = useDateTimeCulture();

    const getDateTimeFormatted = (date:Date) {
        return intl.formatDate(date, locale: dateTimeCulture);
    }

But there is no option for locale in the intl.formatDate Api?

How can I achieve this - using 2 locales the same time in React Intl?

Answer 1

If anyone is following up.... My solution is as follows....

    const uiLanguage: string = user.profile.ui_culture ?? "en";

    const numberFormatLanguage: string = user.profile.culture ?? "en";

    const getMessageLanguage = () => {
        if (uiLanguage === "de") return "de";
        return "en";
    };

    return (
        <IntlProvider messages={messages[getMessageLanguage()]} locale={numberFormatLanguage}>
            {children}
        </IntlProvider>
    );

With this in place you have localized messages and for all other intl calls (e.g. formatted dates) the other locale is taken.