Mostrar texto en el idioma del marco

Cualquier persona que instale tu widget puede elegir un idioma para su marco en los Ajustes del marco. Las fechas y los números de tu widget se escriben en ese idioma sin que tengas que hacer nada, y el hook usePreferredLanguage le dice a tu widget qué idioma es, para que también pueda mostrar sus propios textos en él.

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

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

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

language es uno de estos valores: "en", "fr", "de", "it", "es" o "ja". Un marco que se deja en Automático, y también la vista previa del Estudio de widgets, te dan "en".

Fechas y números

Las fechas y los números no necesitan nada de ti. Si no indicas el idioma en toLocaleDateString, toLocaleString o cualquier formateador de Intl, se escriben en el idioma del marco. Cuando pases opciones, pon undefined donde iría el idioma:

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 un idioma concreto, como "en-GB", solo si quieres ese mismo idioma en todos los marcos.

Tus propios textos

Guarda una traducción de cada texto que muestre tu widget y recurre al inglés para los idiomas que no hayas traducido:

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