Mostrare il testo nella lingua della cornice

Chi installa il tuo widget può scegliere una lingua per la propria cornice nelle Impostazioni della cornice. Le date e i numeri del tuo widget vengono scritti in quella lingua senza che tu debba fare nulla. L’hook usePreferredLanguage dice al tuo widget qual è la lingua, così può mostrare in quella lingua anche le sue parole.

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

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

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

language è uno tra "en", "fr", "de", "it", "es" e "ja". Una cornice lasciata su Automatica e l’anteprima dello Studio dei widget ti danno "en".

Date e numeri

Per le date e i numeri non devi fare nulla. Non indicare la lingua in toLocaleDateString, toLocaleString o in un qualsiasi formattatore Intl, e il testo verrà scritto nella lingua della cornice. Quando passi delle opzioni, metti undefined al posto della lingua:

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

Indica una lingua, come "en-GB", solo quando vuoi proprio quella su tutte le cornici.

Le tue parole

Prepara una traduzione di ogni testo che il tuo widget mostra e, per le lingue che non hai tradotto, ripiega sull’inglese:

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