Current namespace file (examples.json)

{
  "title": "Questa è una stringa",
  "with_tags": "Questa è una stringa <0>con tag HTML</0> all'interno",
  "with_an_array": [
    "Questo è un",
    "elenco di",
    "voci"
  ],
  "this_is_interpolated": "La cosa migliore di James è {{reason}}",
  "with_an_array_with_tags": [
    "Questa è una stringa <bold>con tag HTML</bold> all'interno",
    "E così <bold>anche questo</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: Questa è una stringa

---

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:

• Questo è un
• elenco di
• voci

---

With interpolation

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

Outputs: La cosa migliore di James è 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:

• Questa è una stringa con tag HTML all'interno
• E così anche questo