React Adapter

Use astro-intl/react to access translations inside React components with full rich text support.

Import

Import from the astro-intl/react subpath. This is available since v2.0.0.

Import

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

Store-backed (Astro Islands)

Use getTranslations(namespace) inside React components rendered as Astro islands. The store is automatically populated by setRequestLocale or 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 (No Store)

Use createGetTranslations(ui, defaultLocale) when you need translations without the global store — for example in tests or outside Astro's request lifecycle.

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 with t.rich()

Use t.rich(key, tags) to interpolate React components inside translation strings. Tags receive the inner text as children and return a 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>
  );
}

Hydration Tip React islands must use client:load or client:visible to hydrate. Translations are resolved on the server, so the component receives the final strings — no client-side fetching needed.

When to use standalone vs store Use the store-backed version (getTranslations) in Astro islands where the locale context is already set. Use standalone (createGetTranslations) in unit tests, Storybook, or any context outside Astro's request lifecycle.

Breaking Change (v2.0.0) getTranslationsReact has been removed from the root astro-intl export. Import from astro-intl/react instead.