Translate dynamic text and links

Most text can be found automatically. Use these patterns when the text depends on data or contains a link, emphasis, or another component.

Which pattern should I use?

The text contains a value

Call t(source, values?, options?) from useTranslation(). The source must be a string literal for the compiler to extract it.

import { useTranslation } from "@linguanahq/react";

export function SearchResults({ count }: { count: number }) {
  const { t } = useTranslation();

  return (
    <p>
      {t(
        "{count, plural, one {# result} other {# results}}",
        { count },
        { id: "search.results", context: "Search result count" },
      )}
    </p>
  );
}

Linguana keeps the variable in place when the message is translated.

The text changes based on a number

t(
  "{count, plural, one {# item} other {# items}}",
  { count },
)

Plural rules follow the selected language.

The text contains a link

Your application still owns the destination and behavior. The translation controls only where the linked words appear.

import { T } from "@linguanahq/react";

export function CheckoutConsent() {
  return (
    <T
      id="legal.terms"
      defaultMessage="Read <terms>the terms</terms>."
      context="Checkout consent"
      components={{
        terms: <a href="/terms" />,
      }}
    />
  );
}

Translators can move the <terms> slot, but the application still owns the destination and component behavior.

A custom component has a user-facing label

The compiler automatically handles title, placeholder, aria-label, alt, label, and the literal value of a button. Opt one additional literal attribute in by name when you do not control the component API:

<Widget
  data-translate="emptyLabel"
  emptyLabel="No results"
/>

Use a space- or comma-separated list for multiple label props.

The content should not be translated

<section data-no-translate>
  <strong>Linguana</strong>
  <code>sku_checkout_v2</code>
</section>

Use this for code samples, identifiers, or content handled by another system.

What Linguana already leaves alone

Linguana leaves IDs, class names, URLs, event handlers, analytics values, and test identifiers alone.

Next

Review Keep product text and code separate, then show translated content.