Trans

Trans is the general-purpose Component Macro for translated markup content.

Use Trans when a translator needs to preserve links, emphasis, or other embedded structure. It can also be used for non-rich-text messages, but its clearest advantage shows up when the message is naturally authored as markup.

For the framework-agnostic Lingui semantics, see the official Trans reference.

Source

Demo.svelte Catalog

<p>
  <Trans>
    Say hello to <strong>{name}</strong>.
  </Trans>
</p>

#: src/demos/macros/trans-component/Demo.svelte
msgid "Say hello to <0>{name}</0>."
msgstr "Say hello to <0>{name}</0>."

Result

Preview Transformed Svelte Compiled Catalog

Say hello to Lingui.

<p>
  <L4sRuntimeTrans {.../*i18n*/
  {
    id: "Z8ZDKV",
    values: {
      name: name
    },
    components: {
      0: {
        kind: "element",
        tag: "strong",
        props: {}
      }
    }
  }} />
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"Z8ZDKV\":[\"Say hello to <0>\",[\"name\"],\"</0>.\"]}",
) as Messages;

Locale

EN JA

Name

Usage

Svelte

<script lang="ts">
  import { Trans } from "lingui-for-svelte/macro";
</script>

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Astro

---
import { Trans } from "lingui-for-astro/macro";
---

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Official Lingui

import { Trans } from "@lingui/react/macro";

function Component() {
  return (
    <Trans>
      Read the <a href="/docs">documentation</a>.
    </Trans>
  );
}

When Trans is a good fit

• the translation includes links or emphasis
• the structure matters to translators
• the message reads more naturally as markup than as a string template