Volver

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Resumen

Como parte de nuestra experimentación continua para dejar atrás el contexto de React, gt-react ahora permite usar t como literal de plantilla etiquetada:

import { t } from "gt-react/browser";

const greeting = t`Hello, ${name}!`;

Esta es una sintaxis alternativa a la llamada existente a la función t(). En lugar de escribir marcadores de posición al estilo ICU y pasar un objeto de opciones, escribes un literal de plantilla estándar de JavaScript y la interpolación de variables se gestiona automáticamente.

Antes y después

// Antes — marcadores de posición ICU + objeto de opciones
t("Hello, {name}! You have {count} items.", { name, count })

// Después — literal de plantilla etiquetada
t`Hello, ${name}! You have ${count} items.`

La forma de literal de plantilla etiquetada elimina la necesidad de nombrar marcadores de posición o duplicar referencias a variables. Escribes la cadena igual que escribirías cualquier literal de plantilla de JavaScript.

No requiere contexto de React

Al igual que la función t() introducida en gt-react@10.12.0, la forma de literal de plantilla etiquetada no depende del contexto de React. Funciona en cualquier parte del código del navegador:

  • Controladores de eventos: onClick={() => alert(t`Saved!`)}
  • Funciones auxiliares: function formatError(code) { return t`Error: ${code}` }
  • Constantes y configuración: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Incluso completamente fuera de los componentes de React

Registro global

Si no quieres importar t en cada archivo, puedes registrarlo de forma global:

// En el punto de entrada de tu aplicación (p. ej., layout.tsx)
import "gt-react/macros";

Esto establece globalThis.t, lo que hace que el literal de plantilla etiquetada esté disponible en cualquier parte sin necesidad de una importación explícita.

Ejemplo

import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}

O bien con registro global:

// No se necesita importar — t está en globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};

Enlaces