Current namespace file (examples.json)

{
  "title": "Das ist ein Text",
  "with_tags": "Das ist ein Text <0>mit HTML</0>-Tags",
  "with_an_array": [
    "Das ist eine",
    "Liste von",
    "Teilen"
  ],
  "this_is_interpolated": "Das Beste an James ist {{reason}}",
  "with_an_array_with_tags": [
    "Das ist ein Text <bold>mit HTML</bold>-Tags",
    "Und so <bold>ist das</bold>"
  ]
}

Adding an arbitrary string

Useful for; using translations as properties eg for page meta tags

// with raw i18n library
i18next.setDefaultNamespace('examples');
i18next.t('title');

Outputs: Das ist ein Text

---

Markup

import { Trans } from 'astro-i18next/components';
import i18next from 'i18next';
i18next.setDefaultNamespace('examples');
---
<Trans i18nKey="with_tags">
  <u></u>
</Trans>
  

---

Using arrays

<ul style={{ display: 'flex', flexDirection: 'row', gap: '10px' }}>
  {
    i18next
      .t('with_an_array', { returnObjects: true })
      .map((item) => <li>{item}</li>)
  }
</ul>
  

Outputs:

• Das ist eine
• Liste von
• Teilen

---

With interpolation

{
  i18next.t('this_is_interpolated', { reason: 'he is the best' })
}

Outputs: Das Beste an James ist he is the best

List with HTML

You have to do this in a .jsx file, it wont work in an .astro file because it's too jsxy

<ul>
  {i18next
    .t('with_an_array_with_tags', { returnObjects: true })
    .map((item) => (
      <li key={item}>
        <Trans
          components={{
            bold: <strong />
          }}
        >
          {item}
        </Trans>
      </li>
    ))}
</ul>

  

Outputs:

• Das ist ein Text mit HTML-Tags
• Und so ist das