Internationalization - Fanfare Documentation

Fanfare components ship with default text and locale support. You can set the active locale and override any message key your integration needs to own.

Set locale on the provider

import { FanfareProvider } from "@fanfare-io/fanfare-sdk-react";

export function App() {
  return (
    <FanfareProvider
      organizationId="org_123"
      publishableKey="pk_live_123"
      locale="fr"
    >
      <ProductLaunchPage />
    </FanfareProvider>
  );
}

Supported default locale data includes English, Spanish, French, German, Italian, Portuguese, Japanese, and Chinese. Locale values are extensible so your app can pass regional locale tags where needed.

Override messages

import { FanfareProvider } from "@fanfare-io/fanfare-sdk-react";

export function App() {
  return (
    <FanfareProvider
      organizationId="org_123"
      publishableKey="pk_live_123"
      translations={{
        "queue.enter": "Join the line",
        "queue.leave": "Leave the line",
        "granted.cta": "Continue to checkout",
        "error.retry": "Try again",
      }}
    >
      <ProductLaunchPage />
    </FanfareProvider>
  );
}

Translation overrides are partial. Any key you do not override falls back to the SDK default for the active locale.

Use translations in custom UI

import { useTranslations } from "@fanfare-io/fanfare-sdk-react";

export function CustomButton({ onClick }: { onClick: () => void }) {
  const { t } = useTranslations();

  return <button onClick={onClick}>{t("queue.enter")}</button>;
}

Type-safe keys

import type { TranslationMessageKey } from "@fanfare-io/fanfare-sdk-react";

const customCopy: Partial<Record<TranslationMessageKey, string>> = {
  "common.continue": "Continue",
  "granted.cta": "Shop now",
};

Use customer-friendly copy. For verification and access decisions, keep the message outcome-oriented and avoid describing private enforcement logic.