Text in der Sprache des Rahmens anzeigen

Alle, die Ihr Widget installieren, können in den Rahmeneinstellungen eine Sprache für ihren Rahmen wählen. Datumsangaben und Zahlen erscheinen in Ihrem Widget dann von selbst in dieser Sprache. Welche Sprache es ist, verrät Ihrem Widget der Hook usePreferredLanguage, damit es auch seine eigenen Texte darin zeigen kann.

import { usePreferredLanguage } from "~lib/use-preferred-language";

export const Widget = () => {
  const language = usePreferredLanguage();

  return <div>{language}</div>;
};

language ist "en", "fr", "de", "it", "es" oder "ja". Ein Rahmen, der auf Automatisch steht, und die Vorschau im Widget-Studio liefern "en".

Datumsangaben und Zahlen

Um Datumsangaben und Zahlen müssen Sie sich nicht kümmern. Lassen Sie bei toLocaleDateString, toLocaleString und jedem Formatierer aus Intl die Sprache weg, dann erscheinen sie in der Sprache des Rahmens. Wenn Sie Optionen übergeben, setzen Sie undefined an die Stelle der Sprache:

import { useScheduledDate } from "~lib/use-scheduled-date";

export const Widget = () => {
  const scheduledDate = useScheduledDate();

  return (
    <div>
      {scheduledDate.toLocaleDateString(undefined, {
        weekday: "long",
        day: "numeric",
        month: "long",
      })}
    </div>
  );
};

Geben Sie eine Sprache wie "en-GB" nur an, wenn Sie genau diese auf jedem Rahmen haben möchten.

Ihre eigenen Texte

Halten Sie für jeden Text, den Ihr Widget zeigt, eine Übersetzung bereit, und greifen Sie bei einer Sprache, die Sie nicht übersetzt haben, auf Englisch zurück:

import { usePreferredLanguage } from "~lib/use-preferred-language";

const GREETINGS: Record<string, string> = {
  en: "Good morning",
  fr: "Bonjour",
  ja: "おはようございます",
};

export const Widget = () => {
  const language = usePreferredLanguage();

  return <h1>{GREETINGS[language] ?? GREETINGS.en}</h1>;
};