React Adapter — astro-intl

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.

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ón Los islands de React deben usar client:load o client:visible para hidratarse. Las traducciones se resuelven en el servidor, así que el componente recibe los strings finales — sin fetching del lado del cliente.

Cuándo usar standalone vs store Usa 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) getTranslationsReact ha sido eliminado del export raíz de astro-intl. Importa desde astro-intl/react en su lugar.