Current namespace file (examples.json)

{
  "title": "Este es un texto",
  "with_tags": "Este es un texto <0>con HTML</0> dentro de etiquetas",
  "with_an_array": [
    "Esto es un",
    "arreglo de",
    "ítems"
  ],
  "this_is_interpolated": "Lo mejor de James es {{reason}}",
  "with_an_array_with_tags": [
    "Este es un texto <bold>con HTML</bold> dentro de etiquetas",
    "Y <bold>esto</bold> también"
  ]
}

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: Este es un texto

---

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:

• Esto es un
• arreglo de
• ítems

---

With interpolation

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

Outputs: Lo mejor de James es 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:

• Este es un texto con HTML dentro de etiquetas
• Y esto también