Localization of Title

[Daniela]

Hello,

 

I am trying to localize my entire application but I cannot get this example working; https://www.telerik.com/kendo-react-ui/components/intl/l10n/reacting-to-language-changes/

My code is below.

import { Message } from '../../common/Message';

loadMessages(messages["es"], "es");

const DetailComponent = (props: any) => {

    const locales: LocaleInterface[] = [

        {

          language: "en-US",

          locale: "en",

        },

        {

          language: "es-ES",

          locale: "es",

        },

      ];

    const [currentLocale, setCurrentLocale] = React.useState<LocaleInterface>(

        locales[0]

    );

const defaultMessages = {

  [yesterdaysMessageKey]: "Yesterday was a good day!",

  [todaysMessages]: "Today is a good day as well!",

  [tomorrowsMessageKey]: "Tomorrow will be even better!",

};

 

return (

<LocalizationProvider language={currentLocale.language}>

<IntlProvider locale={currentLocale.locale}>

<p>

 <strong> <Message messageKey={yesterdaysMessageKey} defaultMessage={defaultMessages[yesterdaysMessageKey]}/>:</strong> {dataItem.nickname}

</p>

</IntlProvider>

</LocalizationProvider>

  );

};

 

import * as React from "react";

import { useLocalization } from "@progress/kendo-react-intl";

interface MessageProps {

  messageKey: string;

  defaultMessage: string;

}

export const Message = (props: MessageProps) => {

  const localization = useLocalization();

  return (

    <span style={{ display: "block" }}>

      {localization.toLanguageString(props.messageKey, props.defaultMessage)}

    </span>

  );

};

 

export interface LocaleInterface {

    language: string;

    locale: string;

  }

 

[Filip]

Hello, Daniela,

Thank you for reaching out to us.

I inspected the provided code snippet, it seems that the approach is right. Can you provide more information on what isn't working right now? Is there any error in the console, or is it that the languages don't change when changing them from the dropdown? 

In case it's the second scenario, I can recommend making sure that the translated messages are imported like in the example (in case you haven't done that already).

Is it possible to provide a working example that showcases the issue, so that I can inspect and assist further?

Regards, FilipProgress Telerik

[Daniela]

Hello,

 

I could fix it following this example : https://www.telerik.com/kendo-react-ui/

 

Thanks,

 

Daniela.