Skip to main content

Translations

To handle internationalization with the SDK, you can customize the language you want to receive from your configuration in the studio (part of the content) and you can pass your own translations for static values (part of the interface).

Dynamic values​

When you initialize the SDK backend client, you can force a language like so:

const client = initClient({ getLanguage: () => "fr_FR" });

TranslationsProvider​

You can override the default English keys by implementing our TranslationsProvider.

// ./src/app.tsx

import { TranslationsProvider } from "@swapcard/react-sdk/lib/translations";

function MyWebsiteApp() {
  const locale = useLocale();

  return (
    <TranslationsProvider
      translations={
        locale === "fr" ? { search: "Recherche" } : { search: "Search" }
      }
    >
      <SubComponents />
    </TranslationsProvider>
  );
}

Available keys​

  • refineList string
  • filters string
  • search string
  • information string
  • documents string
  • results (count: number | string) => string
  • bookmark string
  • contactDetails string
  • socialMedia string
  • showResults (count: number | string) => string
  • open string
  • teamMembers string