Localization of Title

1 Answer 61 Views

Localization

Daniela asked on 13 May 2022, 01:46 PM

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

1 Answer, 1 is accepted

answered on 17 May 2022, 11:47 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daniela

commented on 17 May 2022, 11:50 AM

Hello,

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

Thanks,

Daniela.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Localization of Title

1 Answer, 1 is accepted