Adaptador React

Usa astro-intl/react para acceder a traducciones dentro de componentes React con soporte completo de rich text.

Importar

Importa desde el subpath astro-intl/react. Disponible desde v2.0.0.

Import

import { getTranslations, createGetTranslations } from "astro-intl/react";

Con Store (Astro Islands)

Usa getTranslations(namespace) dentro de componentes React renderizados como Astro islands. El store se llena automáticamente por setRequestLocale o createIntlMiddleware. Antes de usar estos ejemplos, añade un objeto hero con title, subtitle y description a ambos JSON.

MyComponent.tsx

import { getTranslations } from "astro-intl/react";

export default function MyComponent() {
  const t = getTranslations("hero");

  return (
    <div>
      <h1>{t("title")}</h1>
      <p>{t("subtitle")}</p>
    </div>
  );
}

Standalone (Sin Store)

Usa createGetTranslations(ui, defaultLocale) cuando necesites traducciones sin el store global — por ejemplo en tests o fuera del ciclo de vida de Astro.

standalone.tsx

import { createGetTranslations } from "astro-intl/react";
import en from "./i18n/messages/en.json";
import es from "./i18n/messages/es.json";

const getTranslations = createGetTranslations(
  { en, es },
  "en"
);

export default function MyComponent({ lang }: { lang: string }) {
  const t = getTranslations(lang, "hero");

  return <h1>{t("title")}</h1>;
}

Rich Text con t.rich()

Usa t.rich(key, tags) para interpolar componentes React dentro de strings de traducción. Los tags reciben el texto interno como children y retornan un ReactNode.

RichTextExample.tsx — t.rich()

import { getTranslations } from "astro-intl/react";

export default function RichTextExample() {
  const t = getTranslations("hero");

  return (
    <p>
      {t.rich("description", {
        bold: (chunks) => <strong>{chunks}</strong>,
        link: (chunks) => <a href="https://astro.build">{chunks}</a>,
      })}
    </p>
  );
}

Tip de HidrataciónUsa client:load o client:visible solo si necesitas interacción. El store del servidor no se transfiere al navegador: pasa textos traducidos como props o usa createGetTranslations con mensajes disponibles en el cliente.

Cuándo usar standalone vs storeUsa la versión con store (getTranslations) en Astro islands donde el contexto de locale ya está configurado. Usa standalone (createGetTranslations) en unit tests, Storybook, o cualquier contexto fuera del ciclo de vida de Astro.

Breaking Change (v2.0.0)Los helpers de React se movieron del paquete raíz a astro-intl/react. Consulta la guía de migración v1→v2 para las firmas históricas.