Afficher du texte dans la langue du cadre

Toute personne qui installe votre widget peut choisir une langue pour son cadre, dans les paramètres du cadre. Les dates et les nombres de votre widget s’écrivent alors dans cette langue sans que vous ayez rien à faire, et le hook usePreferredLanguage indique à votre widget de quelle langue il s’agit, pour qu’il puisse aussi y afficher ses propres textes.

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

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

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

language vaut "en", "fr", "de", "it", "es" ou "ja". Un cadre laissé sur Automatique, ainsi que l’aperçu du Studio de widgets, vous donnent "en".

Dates et nombres

Les dates et les nombres ne vous demandent rien. Omettez la langue dans toLocaleDateString, toLocaleString ou tout formateur Intl, et ils s’écrivent dans la langue du cadre. Si vous passez des options, mettez undefined à la place de la langue :

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

N’indiquez une langue, comme "en-GB", que si vous la voulez sur tous les cadres.

Vos propres textes

Gardez une traduction de chaque texte qu’affiche votre widget, et revenez à l’anglais pour une langue que vous n’avez pas traduite :

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